{"id":22866,"library":"vite-plugin-svg-icons","title":"Vite Plugin SVG Icons","description":"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.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/anncwb/vite-plugin-svg-icons","tags":["javascript","vite","vite-plugin","svg","sprite","svgo","vben","typescript"],"install":[{"cmd":"npm install vite-plugin-svg-icons","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svg-icons","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svg-icons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required as the plugin runs within Vite's plugin system; compatible with Vite >=2.0.0","package":"vite","optional":false}],"imports":[{"note":"Named export is the correct import; default import is not provided.","wrong":"import vitePluginSvgIcons from 'vite-plugin-svg-icons'","symbol":"vitePluginSvgIcons","correct":"import { vitePluginSvgIcons } from 'vite-plugin-svg-icons'"},{"note":"Utility function for creating a Vue component from an SVG icon path. Available since v2.0.0.","wrong":"import { createSvgIcon } from 'vite-plugin-svg-icons/src'","symbol":"createSvgIcon","correct":"import { createSvgIcon } from 'vite-plugin-svg-icons'"},{"note":"TypeScript type for plugin options, imported as type-only.","wrong":null,"symbol":"VitePluginSvgIconsOptions","correct":"import type { VitePluginSvgIconsOptions } from 'vite-plugin-svg-icons'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { vitePluginSvgIcons } from 'vite-plugin-svg-icons';\nimport path from 'path';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginSvgIcons({\n      iconDirs: [path.resolve(process.cwd(), 'src/icons')],\n      symbolId: 'icon-[dir]-[name]',\n      svgoOptions: true,\n    }),\n  ],\n});\n\n// In your application (e.g., main.ts)\nimport 'virtual:svg-icons-register';\n\n// Using the icon in HTML\n// <svg aria-hidden=\"true\">\n//   <use xlink:href=\"#icon-home\" />\n// </svg>","lang":"typescript","description":"Sets up the plugin to load SVG files from 'src/icons', configure symbol ID pattern, and enable SVGO optimization."},"warnings":[{"fix":"Update your Vite config to use the new option names: iconDirs, symbolId, etc.","message":"Plugin options have changed between v1.x and v2.x. The option 'iconDirs' replaced 'dirs', and 'symbolId' replaced 'symbol_id'.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade Vite to version 2.0.0 or later.","message":"Support for Vite <2.0.0 has been dropped in v2.0.0.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Add 'import 'virtual:svg-icons-register'' in your application's entry file (e.g., main.js/ts).","message":"Importing 'virtual:svg-icons-register' is required for the plugin to inject SVG symbols into the DOM. Forgetting this import results in no icons displayed.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Use ES import syntax; ensure your project is configured for ESM.","message":"The plugin does not support CommonJS require() due to being ESM-only.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install vite-plugin-svg-icons' and ensure the import statement is correct: 'import { vitePluginSvgIcons } from 'vite-plugin-svg-icons''.","cause":"Package not installed or incorrect import path.","error":"Cannot find module 'vite-plugin-svg-icons'"},{"fix":"Upgrade Vite: 'npm install vite@latest'.","cause":"The installed Vite version is lower than 2.0.0.","error":"Error: The plugin 'vitePluginSvgIcons' requires Vite >=2.0.0"},{"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.","cause":"The virtual module is not registered because the plugin is not properly configured or loaded.","error":"Failed to resolve import 'virtual:svg-icons-register'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}