Getting started

Install vite-awesome-svg-loader

npm i vite-awesome-svg-loader

Add vite-awesome-svg-loader to Vite config file

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

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

export default defineConfig({
  plugins: [
    vue(), // Or whatever framework you're using

    // vite-awesome-svg-loader:
    viteAwesomeSvgLoader({ /* Optional configuration */ }),

    // Other plugins...
  ],
  // Rest of the configuration...
});

Optional Typescript Only Register import types

Note

Unfortunately, it’s not possible to generate all import types, so only some will work without an error.

You can still suppress errors by using //@ts-ignore comments.

This will make TypeScript happy with URL parameters.

1. Create env.d.ts file or use existing file where you store triple slash directives.

2. Add following string to it:

   /// <reference types="vite-awesome-svg-loader" />

3. Open tsconfig.json and add env.d.ts to the include property:

   { "include": ["env.d.ts"] }

Optional Configure loader

This step is highly recommended because you won’t need to import every file with URL parameters.

See configuration options

Start importing files

Pick and combine loading methods and available transformations:

import imgUrl from "./image.svg?url";
import imgSrc from "./image.svg?source";
import preLineWidthImgSrc from "./image.svg?source&preserve-line-width";
import recoloredImgSrc from "./image.svg?source&set-current-color";
import fullyTransformedImgSrc from "./image.svg?source&preserve-line-width&set-current-color";