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

vite-plugin-svg-icons-ng

library1.8.1jsnpmunverified

Vite plugin to generate an SVG sprite from a set of SVG files and inject it into the HTML at build time or mount it in development via a virtual module. v1.8.1 is the current stable release, with active development and regular releases. It supports Vite >=5 and Node >=18. Key differentiators: file-based icon management, efficient HMR with cached compilation, SSR-friendly sprite injection, duplicate symbol detection, and virtual modules (register, ids, sprite). Compared to alternatives like vite-plugin-svg-icons, this is a modern fork with improved TypeScript types and a cleaner virtual module API. TypeScript ready.

web-framework

npm install vite-plugin-svg-icons-ng

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVG-IC

vite-plugin-svg-icons-ng

web-frameworkjavascriptv1.8.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.

createSvgIconsPlugin

✓ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons-ng'

✗ const createSvgIconsPlugin = require('vite-plugin-svg-icons-ng')

ESM-only package; CommonJS require is not supported as the package is type: 'module' and uses ESM exports.

virtual:svg-icons/register

✓ import 'virtual:svg-icons/register'

✗ import 'virtual:svg-icons-register'

The deprecated virtual module id 'virtual:svg-icons-register' (with dash) is removed in v2; use the slash-based path. In v1.x it still works but emits a deprecation warning.

VitePluginSvgIconsNgOptions

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

Type import for options; useful when defining plugin config in TypeScript files.

Shows how to configure the Vite plugin with a custom symbol ID pattern and SVGO options, then import the virtual register module in the app entry.

import { defineConfig } from 'vite'; import { createSvgIconsPlugin } from 'vite-plugin-svg-icons-ng'; import path from 'path'; export default defineConfig({ plugins: [ createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), 'src/icons')], symbolId: 'icon-[dir]-[name]', svgoOptions: { multipass: true, plugins: ['preset-default', 'removeTitle', 'removeDesc'] } }) ] }); // In your entry file (e.g., main.ts): import 'virtual:svg-icons/register';

Debug

Known issues

deprecatedVirtual module ids with dashes (e.g., 'virtual:svg-icons-register') are deprecated and will be removed in v2.0.0.

fix

Update imports to use slash-based paths: 'virtual:svg-icons/register', 'virtual:svg-icons/ids', 'virtual:svg-icons/sprite'.

affects: >=1.0.0 <2.0.0

breakingv1.7.0 changed the default value of 'symbolId' from 'icon-[name]' to 'icon-[dir]-[name]' to prevent collisions.

fix

If you relied on the previous default, set symbolId explicitly: symbolId: 'icon-[name]'.

affects: >=1.7.0

gotchaThe plugin requires Vite >=5.0.0; using it with Vite 4 will cause runtime errors.

fix

Upgrade Vite to version 5 or later.

affects: >=1.0.0

gotchaWhen using monorepos, relative iconDirs resolve from the Vite project root (not the package root). This can cause icons not to be found.

fix

Use absolute paths for iconDirs when the icon directory is outside the current app root: iconDirs: [path.resolve(__dirname, '../../shared/icons')].

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'virtual:svg-icons/register' or its corresponding type declarations.

TypeScript cannot resolve the virtual module without a proper declaration.

fix

Add a declaration file (e.g., src/vite-env.d.ts) with: /// <reference types="vite-plugin-svg-icons-ng/client" />

TypeError: createSvgIconsPlugin is not a function

Package is ESM-only; using CommonJS require() causes the import to fail.

fix

Switch to ESM imports: import { createSvgIconsPlugin } from 'vite-plugin-svg-icons-ng'

[Vite] The virtual module 'virtual:svg-icons-register' has been deprecated and will be removed in v2.0.0.

Using the old dash-based virtual module id.

fix

Use the new slash-based id: import 'virtual:svg-icons/register'

Upgrade

Version history

1.8.1latest on npm

Audit

Dependencies

viterequiredPeer dependency: requires Vite 5 or higher to function, as it uses Vite's plugin and virtual module system.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

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

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

homepagehttps://blog.yangxu52.top/vite-plugin-svg-icons-ng ↗