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. 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.

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
Custom framework