Skip to content

vite-awesome-svg-loader

This is a framework-agnostic 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 improve performance of your website by using an alternative SVG loading method.
  3. Can preserve line width. Images will retain line width regardless of the size.
  4. Can replace colors with currentColor or a custom color via configuration.
  5. Automatically minimizes your SVGs with SVGO.
  6. Allows you to create SVG sprites using optional integrations.

Learn the basics

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

Demos and examples

Section titled “Demos and examples”
React 17+
Vue 3
Web components Standard custom elements. Declarative and imperative APIs. No framework required.
Vanilla JS Classic object-oriented API. Widest browser support.
Other frameworks Not found what you're looking for? Build your own integration!