{"id":22247,"library":"rollup-plugin-svg-to-symbol","title":"rollup-plugin-svg-to-symbol","description":"A Rollup plugin that transforms SVG files into symbol strings, enabling custom sprite generation. Version 1.0.0 is the current stable release. It focuses solely on converting SVGs to `<symbol>` elements with optional SVGO optimization and custom ID extraction. Unlike broader SVG loading plugins, it outputs raw symbol markup for manual assembly into sprites. Minimal dependencies, easy to configure.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/fjc0k/rollup-plugin-svg-to-symbol","tags":["javascript","rollup","plugin","svg","symbol","icon"],"install":[{"cmd":"npm install rollup-plugin-svg-to-symbol","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-svg-to-symbol","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-svg-to-symbol","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for optimizing SVG files before conversion.","package":"svgo","optional":true}],"imports":[{"note":"ESM import is preferred; CJS require works but may need default destructuring.","wrong":"const svgToSymbol = require('rollup-plugin-svg-to-symbol')","symbol":"default","correct":"import svgToSymbol from 'rollup-plugin-svg-to-symbol'"},{"note":"The module exports a single function as default, not a named export.","wrong":"import { svgToSymbol } from 'rollup-plugin-svg-to-symbol'","symbol":"plugin function","correct":"import svgToSymbol from 'rollup-plugin-svg-to-symbol'"},{"note":"Each SVG file is imported as a default export (string containing <symbol>).","wrong":"import { icon } from './icon.svg'","symbol":"SVG import","correct":"import icon from './icon.svg'"}],"quickstart":{"code":"// rollup.config.js\nimport svgToSymbol from 'rollup-plugin-svg-to-symbol';\nexport default {\n  input: 'src/index.js',\n  output: { dir: 'dist', format: 'esm' },\n  plugins: [\n    svgToSymbol()\n  ]\n};\n\n// src/index.js\nimport add from './icons/add.svg';\nconst sprite = `<svg>${add}</svg>`;\nexport default sprite;","lang":"javascript","description":"Shows basic setup: configure Rollup plugin and import SVG as symbol string."},"warnings":[{"fix":"Provide extractId option with filePath to ensure uniqueness.","message":"Default symbol ID uses only the filename without extension, which may cause collisions across directories.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set svgo to {} for default or { plugins: [] } to disable; avoid non-object values.","message":"Option 'svgo' expects an object, but if set to false, SVGO optimization is disabled. Type checking may fail.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Combine with rollup-plugin-copy or similar to output sprite files.","message":"The plugin does not emit any CSS or assets; it only transforms imports. If you expect a file output, use with other plugins.","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":"Place svgToSymbol() after other SVG-loading plugins but before any bundling.","cause":"Misconfigured plugin order after other transform plugins.","error":"Error: The plugin \"svg-to-symbol\" doesn't support changing the order of its hooks."},{"fix":"Install svgo as a dev dependency: npm i svgo -D.","cause":"svgo is not installed when custom SVGO options are provided.","error":"Cannot find module 'svgo'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}