{"id":22246,"library":"rollup-plugin-svg-sprites","title":"rollup-plugin-svg-sprites","description":"Rollup plugin for creating SVG sprites, built on top of svg-baker and svg-baker-runtime, sharing the same foundation as webpack's svg-sprite-loader. Current stable version is 1.2.5, with TypeScript support. It supports both Rollup and Vite, and offers special handling for Vue 3 and React. Key differentiators include query-based imports (.svg?vueComponent, .svg?jsx), support for large numbers of SVGs via require.context, and minimal configuration. Release cadence is periodic with multiple patches. It integrates with Vue 3, React, and standard SVG usage.","status":"active","version":"1.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/godxiaoji/rollup-plugin-svg-sprites#readme","tags":["javascript","rollup","rollup-plugin","svg","svg-sprite","svg-sprite-loader","typescript"],"install":[{"cmd":"npm install rollup-plugin-svg-sprites","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-svg-sprites","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-svg-sprites","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for SVG sprite baking","package":"svg-baker","optional":false},{"reason":"Required to convert CommonJS dependencies like svg-baker to ESM","package":"@rollup/plugin-commonjs","optional":false},{"reason":"Peer dependency for Vue 3 component mode","package":"vue","optional":true}],"imports":[{"note":"ESM-only; no default CommonJS export available.","wrong":"const svgSprites = require('rollup-plugin-svg-sprites')","symbol":"default (plugin)","correct":"import svgSprites from 'rollup-plugin-svg-sprites'"},{"note":"Must use ?vueComponent query for Vue 3 SFC. Without it, returns an object with id only.","wrong":"import MyIcon from './my-icon.svg'","symbol":"SVG as Vue component","correct":"import MyIcon from './my-icon.svg?vueComponent'"},{"note":"Must use ?jsx query for React JSX output. Without it, returns an object with id only.","wrong":"import MyIcon from './my-icon.svg'","symbol":"SVG as React component","correct":"import MyIcon from './my-icon.svg?jsx'"}],"quickstart":{"code":"// rollup.config.js\nimport svgSprites from 'rollup-plugin-svg-sprites';\nimport commonjs from '@rollup/plugin-commonjs';\n\nexport default {\n  input: 'src/index.js',\n  output: { format: 'esm', file: 'dist/bundle.js' },\n  plugins: [commonjs(), svgSprites()]\n};\n\n// src/index.js\nimport myIcon from './icon.svg';\nconsole.log(myIcon.id); // e.g., 'icon'\n\n// HTML or SVG usage:\n// <svg><use xlink:href=\"#${myIcon.id}\"></use></svg>\n\n// For Vue 3:\n// <template><MyIcon /></template>\n// <script setup>\n// import MyIcon from './icon.svg?vueComponent'\n// </script>","lang":"typescript","description":"Minimal setup for Rollup with SVG sprite generation, showing both basic usage and Vue 3 component import."},"warnings":[{"fix":"Add @rollup/plugin-commonjs to plugins array before svgSprites.","message":"Missing @rollup/plugin-commonjs breaks SVG import","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import MyIcon from './icon.svg?vueComponent' instead of bare import.","message":"Vue 3 component import requires ?vueComponent query","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import MyIcon from './icon.svg?jsx' instead of bare import.","message":"React component import requires ?jsx query","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use href=\"#id\" instead of xlink:href=\"#id\" in SVG use elements.","message":"xlink:href is deprecated in favor of href in SVG2","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Add declare module '*.svg?*' declarations in a .d.ts file.","message":"TypeScript declarations require manual type augmentation","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 svg-baker","cause":"Missing runtime dependency svg-baker","error":"Error: Cannot find module 'svg-baker'"},{"fix":"Add commonjs() plugin before svgSprites in rollup config.","cause":"CommonJS module not converted; @rollup/plugin-commonjs missing","error":"Error: 'default' is not exported by node_modules/svg-baker/..., imported from ..."},{"fix":"Ensure svgSprites() is included and use correct import query for Vue/React.","cause":"Importing SVG without proper plugin setup or missing ?vueComponent/?jsx query","error":"TypeError: Cannot read properties of undefined (reading 'id')"},{"fix":"Add type declarations as shown in README: declare module '*.svg?vueComponent' { ... }","cause":"TypeScript cannot resolve SVG import types","error":"Module '\"*.svg\"' resolves to a non-module entity and cannot be imported using this construct."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}