vite-plugin-svg-sprite

0.7.0 verified Mon Apr 27 auth: no javascript

A Vite plugin that transforms SVG files into SVG sprite symbols or framework-specific components. Current stable version is 0.7.0, released with support for custom adapter types. Compatible with Vite 2–7, React 17–19, and Vue 3. Unlike svgr, this plugin generates an inline sprite and provides better render performance for large icon sets. Exports SVG as symbol IDs (vanilla), React components, or Vue components. Ships TypeScript definitions and includes SVGO optimization.

Common errors

error Cannot find module 'vite-plugin-svg-sprite' or its corresponding type declarations. ↓

cause TypeScript cannot resolve the module types because the type declarations are not automatically included.

fix

Add one of the following to your tsconfig.json "types" array: "vite-plugin-svg-sprite/typings/vanilla", "vite-plugin-svg-sprite/typings/react", or "vite-plugin-svg-sprite/typings/vue".

error TypeError: createSvgSpritePlugin is not a function ↓

cause Incorrect import syntax: the plugin is a default export, not a named import.

fix

Use 'import createSvgSpritePlugin from 'vite-plugin-svg-sprite'' instead of 'import { createSvgSpritePlugin } from 'vite-plugin-svg-sprite''.

error Unresolved variable or type: Attributes ↓

cause When using vanilla exportType, trying to destructure 'size' instead of 'attributes' from the SVG module.

fix

Use 'import { attributes } from './icon.svg'' (since v0.6.0) instead of 'import { size } from './icon.svg''.

Warnings

breaking In v0.6.0, the named export 'size' was renamed to 'attributes' for vanilla SVG imports. ↓

fix Replace import { size } from './icon.svg' with import { attributes } from './icon.svg'.

breaking In v0.6.0, the internal dependency 'svg-baker' was removed. ↓

fix If your code relied on svg-baker exports, migrate to use this plugin's output directly.

deprecated Using require() to import this plugin is deprecated; it is ESM-only and does not export a CommonJS module. ↓

fix Change const createSvgSpritePlugin = require('vite-plugin-svg-sprite') to import createSvgSpritePlugin from 'vite-plugin-svg-sprite'.

gotcha By default, the plugin only processes SVGs matching '**/icons/*.svg'. SVGs outside that pattern are not turned into sprite symbols. ↓

fix Set the 'include' option to a broader micromatch pattern (e.g., '**/*.svg') to include all SVG files.

gotcha The plugin re-exports a function as default; it does not export a named function like 'svgSpritePlugin'. ↓

fix Use a default import, e.g., import createSvgSpritePlugin from 'vite-plugin-svg-sprite'.

Install

npm install vite-plugin-svg-sprite

yarn add vite-plugin-svg-sprite

pnpm add vite-plugin-svg-sprite

Imports

default

wrong

const createSvgSpritePlugin = require('vite-plugin-svg-sprite')

correct

import createSvgSpritePlugin from 'vite-plugin-svg-sprite'

ESM-only; named export is not available. The import must be the default export.

IconFoo (from SVG import as React component)
wrong
```
import { IconFoo } from './icons/foo.svg';
```
correct
```
import IconFoo from './icons/foo.svg'; <IconFoo />
```
When using exportType 'react', the SVG import is a default export of a React component. Named imports do not work.
attributes (from SVG import, vanilla)
wrong
```
import { size } from './icons/foo.svg';
```
correct
```
import { attributes } from './icons/foo.svg';
```
In v0.6.0, 'size' was renamed to 'attributes'. For vanilla exportType, the SVG module re-exports a 'attributes' named export.

Quickstart

Configures the plugin for React, processing SVGs from src/icons, disabling removeViewBox, and using default symbol ID format.

import createSvgSpritePlugin from 'vite-plugin-svg-sprite';

export default {
  plugins: [
    createSvgSpritePlugin({
      exportType: 'react',
      include: 'src/icons/*.svg',
      symbolId: 'icon-[name]',
      svgo: {
        plugins: [
          { name: 'removeViewBox', active: false }
        ]
      }
    })
  ]
};