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

vite-plugin-svg-icons

library2.0.1jsnpmunverified

Vite plugin for fast creating SVG sprites. Generates an SVG sprite map from a directory of SVG files, supporting HMR, icon selection via DOM injection, and optional SVGO optimization. Current stable version 2.0.1, released under the MIT license. It is a maintained, Vite-specific alternative to svg-sprite-loader or webpack-based solutions, offering tight integration with Vite's dev server and build pipeline since v2.0.0.

web-framework devops

npm install vite-plugin-svg-icons

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVG-IC

vite-plugin-svg-icons

web-frameworkjavascriptv2.0.1

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.

vitePluginSvgIcons

✓ import { vitePluginSvgIcons } from 'vite-plugin-svg-icons'

✗ import vitePluginSvgIcons from 'vite-plugin-svg-icons'

Named export is the correct import; default import is not provided.

createSvgIcon

✓ import { createSvgIcon } from 'vite-plugin-svg-icons'

✗ import { createSvgIcon } from 'vite-plugin-svg-icons/src'

Utility function for creating a Vue component from an SVG icon path. Available since v2.0.0.

VitePluginSvgIconsOptions

✓ import type { VitePluginSvgIconsOptions } from 'vite-plugin-svg-icons'

TypeScript type for plugin options, imported as type-only.

Sets up the plugin to load SVG files from 'src/icons', configure symbol ID pattern, and enable SVGO optimization.

// vite.config.ts import { defineConfig } from 'vite'; import { vitePluginSvgIcons } from 'vite-plugin-svg-icons'; import path from 'path'; export default defineConfig({ plugins: [ vitePluginSvgIcons({ iconDirs: [path.resolve(process.cwd(), 'src/icons')], symbolId: 'icon-[dir]-[name]', svgoOptions: true, }), ], }); // In your application (e.g., main.ts) import 'virtual:svg-icons-register'; // Using the icon in HTML // <svg aria-hidden="true"> // <use xlink:href="#icon-home" /> // </svg>

Debug

Known issues

breakingPlugin options have changed between v1.x and v2.x. The option 'iconDirs' replaced 'dirs', and 'symbolId' replaced 'symbol_id'.

fix

Update your Vite config to use the new option names: iconDirs, symbolId, etc.

affects: >=2.0.0

deprecatedSupport for Vite <2.0.0 has been dropped in v2.0.0.

fix

Upgrade Vite to version 2.0.0 or later.

affects: >=2.0.0

gotchaImporting 'virtual:svg-icons-register' is required for the plugin to inject SVG symbols into the DOM. Forgetting this import results in no icons displayed.

fix

Add 'import 'virtual:svg-icons-register'' in your application's entry file (e.g., main.js/ts).

affects: >=0.2.0

gotchaThe plugin does not support CommonJS require() due to being ESM-only.

fix

Use ES import syntax; ensure your project is configured for ESM.

affects: >=2.0.0

Errors

Common errors & fixes

Cannot find module 'vite-plugin-svg-icons'

Package not installed or incorrect import path.

fix

Run 'npm install vite-plugin-svg-icons' and ensure the import statement is correct: 'import { vitePluginSvgIcons } from 'vite-plugin-svg-icons''.

Error: The plugin 'vitePluginSvgIcons' requires Vite >=2.0.0

The installed Vite version is lower than 2.0.0.

fix

Upgrade Vite: 'npm install vite@latest'.

Failed to resolve import 'virtual:svg-icons-register'

The virtual module is not registered because the plugin is not properly configured or loaded.

fix

Ensure the plugin is added to the plugins array in vite.config.ts and that the import statement is at the top of your entry file.

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

viterequiredPeer dependency required as the plugin runs within Vite's plugin system; compatible with Vite >=2.0.0

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/anncwb/vite-plugin-svg-icons ↗

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