A Vite plugin that:

1. Can import SVGs as:
   1. Source code (default import type).
   2. URL to a static asset.
   3. Source code data URI.
   4. Source code base64.
   5. Source code base64 data URI.
2. Can preserve line width, i.e. make icons and line art have same line width when scaling.
3. Can replace colors with currentColor or a custom color via configuration (see replaceColorsList option).
4. Will automatically minimize your SVGs using SVGO.
5. Allows you to create SVG sprites using provided integrations.

vite-awesome-svg-loader is framework-agnostic. All integrations are done as subpath imports (for example, vite-awesome-svg-loader/vue-integration). This means that you'll get only what you need in your app bundle. This also means that you can develop your own integration using vite-awesome-svg-loader/integration-utils import.

npm i vite-awesome-svg-loader

The docs website is the central knowledge base for vite-awesome-svg-loader.

• Home
• Getting started
• Configuration

• React
• Vue
• Vanilla JS
• Custom framework