Available SVG transformations

Preserve line width

This makes all SVG elements with stroke have constant line width regardless of the image size.

This is done via ?preserve-line-width import or preserveLineWidth option.

Example usage

import imgSrc from "./image.svg?source&preserve-line-width";

document.getElementById("image-container")!.innerHtml = imgSrc;

Original file

Preserved line width

Replace all colors with currentColor value

This allows you to recolor your images with a single color.

This is done via ?set-current-color import or replaceColorsList option.

Example usage

import imgSrc from "./image.svg?source&set-current-color";

const img = document.getElementById("image-container")!
img.innerHtml = imgSrc;
img.style.color = "red"; // Override image color

Original and transformed files

Replace colors with custom values

This allows you to recolor your images however you want.

This is done via replaceColorsList option.

Example vite.config.ts

import { defineConfig } from "vite";
import { viteAwesomeSvgLoader } from "vite-awesome-svg-loader";

export default defineConfig({
  plugins: [
    viteAwesomeSvgLoader({
      replaceColorsList: [
        {
          files: ["multicolor.svg"],
          replacements: {
            red: "cyan",
            blue: "magenta",
            green: "yellow",
          },
        },
      ],
    }),
  ],
});

Original and transformed files