{"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,"search_vec":"'2':49 '2.0.0':71 '2.1.2':20 '2023':24 '3':51 'across':62 'allow':26 'api':61 'automat':56 'beta.1':72 'build':63 'built':39 'built-in':38 'cli':68 'compon':36 'consist':60 'current':16 'definit':33 'differenti':44 'earli':23 'ecosystem':11 'file':29 'framework':47 'generat':53 'icon':14 'import':27 'integr':8 'javascript':76 'key':43 'manag':15 'multipl':46 'offer':58 'optim':42 'plugin':3,6,79 'react':52 'releas':21 'requir':69 'ship':73 'sprite':54 'stabl':17 'support':45 'svg':13,28,31 'svgicon':4,81 'svgo':41 'symbol':32,55 'tool':64 'type':75 'typescript':74,83 'version':18 'vite':2,5,65,70,78,80 'vite-plugin':77 'vite-plugin-svgicon':1 'vue':48,50,67 'vue/react':35 'webpack':66 'yzfe/svgicon':10,82","created_at":"2026-04-27T17:07:31.484511+00:00","updated_at":"2026-04-27T17:07:31.484511+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://svgicon.github.io","github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-svgicon","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}