{"id":22870,"library":"vite-plugin-svgicon","title":"vite-plugin-svgicon","description":"Vite plugin that integrates the @yzfe/svgicon ecosystem for SVG icon management. Current stable version is 2.1.2, released in early 2023. It allows importing SVG files as SVG symbol definitions or Vue/React components, with built-in SVGO optimization. Key differentiators: supports multiple frameworks (Vue 2, Vue 3, React), generates sprite symbols automatically, and offers a consistent API across build tools (Vite, webpack, Vue CLI). Requires Vite >=2.0.0-beta.1. Ships TypeScript types.","status":"active","version":"2.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/MMF-FE/svgicon","tags":["javascript","vite-plugin","vite","svgicon","@yzfe/svgicon","typescript"],"install":[{"cmd":"npm install vite-plugin-svgicon","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svgicon","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svgicon","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for the plugin to work","package":"vite","optional":false}],"imports":[{"note":"ESM-only; plugin must be used in Vite config as default import.","wrong":"const vitePluginSvgicon = require('vite-plugin-svgicon')","symbol":"default","correct":"import vitePluginSvgicon from 'vite-plugin-svgicon'"},{"note":"Options type is only available as a type export; do not use value import.","wrong":"import { VitePluginSvgiconOptions } from 'vite-plugin-svgicon'","symbol":"VitePluginSvgiconOptions","correct":"import type { VitePluginSvgiconOptions } from 'vite-plugin-svgicon'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport vitePluginSvgicon from 'vite-plugin-svgicon'\n\nexport default defineConfig({\n  plugins: [\n    vitePluginSvgicon({\n      include: ['src/assets/icons/**/*.svg'],\n      svgo: true,\n      svgoConfig: {\n        plugins: [\n          { name: 'removeViewBox', active: false },\n          { name: 'removeDimensions', active: true }\n        ]\n      }\n    })\n  ]\n})","lang":"typescript","description":"Demonstrates basic Vite config with plugin options, SVG include paths, and SVGO customization."},"warnings":[{"fix":"Upgrade Vite to at least 2.0.0-beta.1.","message":"Vite >=2.0.0-beta.1 required; older versions unsupported.","severity":"breaking","affected_versions":">=2.0.0-beta.1"},{"fix":"Order plugins correctly: vue/react plugin first, then svgicon plugin.","message":"Plugin must be placed after other plugins that process SVG (e.g., @vitejs/plugin-vue) to avoid conflicts.","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":"npm install vite-plugin-svgicon --save-dev","cause":"Package not installed or dependency missing.","error":"Error: Cannot find module 'vite-plugin-svgicon'"},{"fix":"Use import statement: import vitePluginSvgicon from 'vite-plugin-svgicon'","cause":"Using require() instead of ESM import.","error":"TypeError: vitePluginSvgicon is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}