{"id":22868,"library":"vite-plugin-svg-sprite","title":"vite-plugin-svg-sprite","description":"A Vite plugin that transforms SVG files into SVG sprite symbols or framework-specific components. Current stable version is 0.7.0, released with support for custom adapter types. Compatible with Vite 2–7, React 17–19, and Vue 3. Unlike svgr, this plugin generates an inline sprite and provides better render performance for large icon sets. Exports SVG as symbol IDs (vanilla), React components, or Vue components. Ships TypeScript definitions and includes SVGO optimization.","status":"active","version":"0.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/meowtec/vite-plugin-svg-sprite","tags":["javascript","vite","svg","typescript"],"install":[{"cmd":"npm install vite-plugin-svg-sprite","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svg-sprite","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svg-sprite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"required as a peer dependency to provide the Vite plugin system","package":"vite","optional":false}],"imports":[{"note":"ESM-only; named export is not available. The import must be the default export.","wrong":"const createSvgSpritePlugin = require('vite-plugin-svg-sprite')","symbol":"default","correct":"import createSvgSpritePlugin from 'vite-plugin-svg-sprite'"},{"note":"When using exportType 'react', the SVG import is a default export of a React component. Named imports do not work.","wrong":"import { IconFoo } from './icons/foo.svg';","symbol":"IconFoo (from SVG import as React component)","correct":"import IconFoo from './icons/foo.svg'; <IconFoo />"},{"note":"In v0.6.0, 'size' was renamed to 'attributes'. For vanilla exportType, the SVG module re-exports a 'attributes' named export.","wrong":"import { size } from './icons/foo.svg';","symbol":"attributes (from SVG import, vanilla)","correct":"import { attributes } from './icons/foo.svg';"}],"quickstart":{"code":"import createSvgSpritePlugin from 'vite-plugin-svg-sprite';\n\nexport default {\n  plugins: [\n    createSvgSpritePlugin({\n      exportType: 'react',\n      include: 'src/icons/*.svg',\n      symbolId: 'icon-[name]',\n      svgo: {\n        plugins: [\n          { name: 'removeViewBox', active: false }\n        ]\n      }\n    })\n  ]\n};","lang":"typescript","description":"Configures the plugin for React, processing SVGs from src/icons, disabling removeViewBox, and using default symbol ID format."},"warnings":[{"fix":"Replace import { size } from './icon.svg' with import { attributes } from './icon.svg'.","message":"In v0.6.0, the named export 'size' was renamed to 'attributes' for vanilla SVG imports.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"If your code relied on svg-baker exports, migrate to use this plugin's output directly.","message":"In v0.6.0, the internal dependency 'svg-baker' was removed.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Change const createSvgSpritePlugin = require('vite-plugin-svg-sprite') to import createSvgSpritePlugin from 'vite-plugin-svg-sprite'.","message":"Using require() to import this plugin is deprecated; it is ESM-only and does not export a CommonJS module.","severity":"deprecated","affected_versions":"*"},{"fix":"Set the 'include' option to a broader micromatch pattern (e.g., '**/*.svg') to include all SVG files.","message":"By default, the plugin only processes SVGs matching '**/icons/*.svg'. SVGs outside that pattern are not turned into sprite symbols.","severity":"gotcha","affected_versions":"*"},{"fix":"Use a default import, e.g., import createSvgSpritePlugin from 'vite-plugin-svg-sprite'.","message":"The plugin re-exports a function as default; it does not export a named function like 'svgSpritePlugin'.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add one of the following to your tsconfig.json \"types\" array: \"vite-plugin-svg-sprite/typings/vanilla\", \"vite-plugin-svg-sprite/typings/react\", or \"vite-plugin-svg-sprite/typings/vue\".","cause":"TypeScript cannot resolve the module types because the type declarations are not automatically included.","error":"Cannot find module 'vite-plugin-svg-sprite' or its corresponding type declarations."},{"fix":"Use 'import createSvgSpritePlugin from 'vite-plugin-svg-sprite'' instead of 'import { createSvgSpritePlugin } from 'vite-plugin-svg-sprite''.","cause":"Incorrect import syntax: the plugin is a default export, not a named import.","error":"TypeError: createSvgSpritePlugin is not a function"},{"fix":"Use 'import { attributes } from './icon.svg'' (since v0.6.0) instead of 'import { size } from './icon.svg''.","cause":"When using vanilla exportType, trying to destructure 'size' instead of 'attributes' from the SVG module.","error":"Unresolved variable or type: Attributes"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}