Skip to content

Vite Awesome SVG Loader Documentation

What is this?

Section titled “What is this?”

This is 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.
  4. Automatically minimizes your SVGs with SVGO.
  5. Allows you to create SVG sprites via symbols using provided integrations.

vite-awesome-svg-loader is framework-agnostic.

However, to create SVG symbols, some boilerplate code in form of components is required. These components are provided in the integrations.

All integrations are provided as ES modules in separate subpath imports (for example, vite-awesome-svg-loader/vue-integration), so your app will contain only required code.

You can integrate vite-awesome-svg-loader with any framework using vite-awesome-svg-loader/integration-utils package.

Great! How do I use it?

Section titled “Great! How do I use it?”

Learn the basics

Section titled “Learn the basics”
Read the "Getting started" guide
Learn about SVG loading methods
See configuration options

Jump straight to the demos and examples

Section titled “Jump straight to the demos and examples”
React
Vue
Vanilla JS
Other frameworks