Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vite-awesome-svg-loader

matafokka2.7kLGPL-2.1-or-later4.1.1TypeScript support: included

Imports SVGs as source code, base64 and data URI. Preserves stroke width, replaces colors with currentColor or custom colors. Optimizes SVGs with SVGO. Creates SVG sprites.

vite, svg, loader, import, image, icon, plugin, vite-svg, vite-loader, vite-plugin, vue, react, vanilla, sprite, sprite-sheet, svg-sprite, sprites, sprite-sheets, preserve-line-width, preserve-stroke-width, currentColor, replace-colors, vite-awesome-svg-loader, svgo

readme

vite-awesome-svg-loader

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 images retain line width regardless of the image size.
  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.

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.

Installation

npm i vite-awesome-svg-loader

Docs

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

Loader

Framework integrations, examples and demos