Registry / web-framework / vite-plugin-svg-sprite

vite-plugin-svg-sprite

library0.7.0jsnpmunverified

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.

web-framework

npm install vite-plugin-svg-sprite

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVG-SP

vite-plugin-svg-sprite

web-frameworkjavascriptv0.7.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

✗ const createSvgSpritePlugin = require('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)

✓ import IconFoo from './icons/foo.svg'; <IconFoo />

✗ import { IconFoo } from './icons/foo.svg';

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)

✓ import { attributes } from './icons/foo.svg';

✗ import { size } 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.

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 } ] } }) ] };

Debug

Known issues

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

affects: >=0.6.0

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

affects: >=0.6.0

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

affects: *

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

affects: *

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

affects: *

Errors

Common errors & fixes

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

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

TypeError: createSvgSpritePlugin is not a function

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

Unresolved variable or type: Attributes

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

Upgrade

Version history

0.7.0latest on npm

Audit

Dependencies

viterequiredrequired as a peer dependency to provide the Vite plugin system

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-svg-sprite ↗