{"id":22865,"library":"vite-plugin-svg-icons-ng","title":"vite-plugin-svg-icons-ng","description":"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.","status":"active","version":"1.8.1","language":"javascript","source_language":"en","source_url":"https://github.com/yangxu52/vite-plugin-svg-icons-ng","tags":["javascript","vite","vite-plugin","svg","icon","svg-icon","svg-icons","sprite","spritemap","typescript"],"install":[{"cmd":"npm install vite-plugin-svg-icons-ng","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svg-icons-ng","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svg-icons-ng","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires Vite 5 or higher to function, as it uses Vite's plugin and virtual module system.","package":"vite","optional":false}],"imports":[{"note":"ESM-only package; CommonJS require is not supported as the package is type: 'module' and uses ESM exports.","wrong":"const createSvgIconsPlugin = require('vite-plugin-svg-icons-ng')","symbol":"createSvgIconsPlugin","correct":"import { createSvgIconsPlugin } from 'vite-plugin-svg-icons-ng'"},{"note":"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.","wrong":"import 'virtual:svg-icons-register'","symbol":"virtual:svg-icons/register","correct":"import 'virtual:svg-icons/register'"},{"note":"Type import for options; useful when defining plugin config in TypeScript files.","wrong":null,"symbol":"VitePluginSvgIconsNgOptions","correct":"import type { VitePluginSvgIconsNgOptions } from 'vite-plugin-svg-icons-ng'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport { createSvgIconsPlugin } from 'vite-plugin-svg-icons-ng';\nimport path from 'path';\n\nexport default defineConfig({\n  plugins: [\n    createSvgIconsPlugin({\n      iconDirs: [path.resolve(process.cwd(), 'src/icons')],\n      symbolId: 'icon-[dir]-[name]',\n      svgoOptions: {\n        multipass: true,\n        plugins: ['preset-default', 'removeTitle', 'removeDesc']\n      }\n    })\n  ]\n});\n\n// In your entry file (e.g., main.ts):\nimport 'virtual:svg-icons/register';","lang":"typescript","description":"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."},"warnings":[{"fix":"Update imports to use slash-based paths: 'virtual:svg-icons/register', 'virtual:svg-icons/ids', 'virtual:svg-icons/sprite'.","message":"Virtual module ids with dashes (e.g., 'virtual:svg-icons-register') are deprecated and will be removed in v2.0.0.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"If you relied on the previous default, set symbolId explicitly: symbolId: 'icon-[name]'.","message":"v1.7.0 changed the default value of 'symbolId' from 'icon-[name]' to 'icon-[dir]-[name]' to prevent collisions.","severity":"breaking","affected_versions":">=1.7.0"},{"fix":"Upgrade Vite to version 5 or later.","message":"The plugin requires Vite >=5.0.0; using it with Vite 4 will cause runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use absolute paths for iconDirs when the icon directory is outside the current app root: iconDirs: [path.resolve(__dirname, '../../shared/icons')].","message":"When using monorepos, relative iconDirs resolve from the Vite project root (not the package root). This can cause icons not to be found.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add a declaration file (e.g., src/vite-env.d.ts) with: /// <reference types=\"vite-plugin-svg-icons-ng/client\" />","cause":"TypeScript cannot resolve the virtual module without a proper declaration.","error":"Error: Cannot find module 'virtual:svg-icons/register' or its corresponding type declarations."},{"fix":"Switch to ESM imports: import { createSvgIconsPlugin } from 'vite-plugin-svg-icons-ng'","cause":"Package is ESM-only; using CommonJS require() causes the import to fail.","error":"TypeError: createSvgIconsPlugin is not a function"},{"fix":"Use the new slash-based id: import 'virtual:svg-icons/register'","cause":"Using the old dash-based virtual module id.","error":"[Vite] The virtual module 'virtual:svg-icons-register' has been deprecated and will be removed in v2.0.0."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}