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 step is needed if you plan to import SVGs with query parameters, for example: import "@/assets/image.svg?source".

There are two methods (without any practical difference between them) to register import types:

1.Recommended

Using types compiler option

Recommended for new projects because this is what modern Vite presets do.

1. Open tsconfig.json file. Some Vite presets use tsconfig.app.json, so if you have this one, open it instead of tsconfig.json.

2. Locate or create types compiler option.

3. Add vite-awesome-svg-loader to it:

   {
     "compilerOptions": {
       "types": [
         "vite/client", // Already present in modern Vite presets
         "vite-awesome-svg-loader" // Add this entry
       ]
     }
   }

2. Using triple slash directives

Recommended for projects that were set up using old Vite presets.

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. If you’ve created env.d.ts by yourself, open tsconfig.json (or tsconfig.app.json, if your preset has one) 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";