{"id":22254,"library":"rollup-plugin-svg","title":"rollup-plugin-svg","description":"Import SVG files as base64 data URIs or as raw SVG markup in Rollup bundles. Current stable version 2.0.0. Maintenance mode; no recent updates. Key differentiator: lightweight, zero-config plugin for SVG imports with optional base64 encoding. Simple API: just add to plugins array and import SVGs like JavaScript modules. Alternatives: @rollup/plugin-image, rollup-plugin-url, but this plugin remains a straightforward choice for SVG-only usage.","status":"maintenance","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/antony/rollup-plugin-svg","tags":["javascript","rollup","modules","images","svg"],"install":[{"cmd":"npm install rollup-plugin-svg","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required as plugin for Rollup bundler.","package":"rollup","optional":false}],"imports":[{"note":"ESM-only; no CommonJS export.","wrong":"const svg = require('rollup-plugin-svg')","symbol":"svg","correct":"import svg from 'rollup-plugin-svg'"},{"note":"SVG files are imported as default export (string). Named imports not supported.","wrong":"import { logo } from './image.svg'","symbol":"default import","correct":"import logo from './image.svg'"},{"note":"Function is default export; must import default. Option 'base64' on the function call.","wrong":"import { svg } from 'rollup-plugin-svg'","symbol":"base64 option","correct":"import svg from 'rollup-plugin-svg'; export default { plugins: [svg({ base64: true })] }"}],"quickstart":{"code":"// rollup.config.js\nimport svg from 'rollup-plugin-svg'\nimport { nodeResolve } from '@rollup/plugin-node-resolve'\n\nexport default {\n  input: 'src/main.js',\n  output: { dir: 'dist', format: 'es' },\n  plugins: [\n    nodeResolve(),\n    svg({ base64: false })\n  ]\n}\n\n// src/main.js\nimport myIcon from './icon.svg'\n// Insert raw SVG markup\ndocument.body.appendChild(myIcon)\n// Or as base64 data URI (if base64: true)\nconst img = document.createElement('img')\nimg.src = myIcon","lang":"javascript","description":"Basic setup: import SVG as raw markup (default) and use in DOM."},"warnings":[{"fix":"Set base64: true in plugin options if you relied on base64 output.","message":"Changed from default base64 to default raw markup in v2.0.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Consider switching to @rollup/plugin-image or rollup-plugin-url for continued support.","message":"Package no longer actively maintained; no updates since 2019.","severity":"deprecated","affected_versions":"*"},{"fix":"Ensure import statements include .svg extension: import logo from './logo.svg'","message":"Import path must end with .svg extension; otherwise plugin won't match.","severity":"gotcha","affected_versions":"*"},{"fix":"Use appropriate plugins for other bundlers (e.g., webpack's url-loader).","message":"Only works with Rollup; not compatible with other bundlers like Webpack or Parcel.","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":"Run npm i -D rollup-plugin-svg and ensure import line is correct: import svg from 'rollup-plugin-svg'","cause":"Missing installation or incorrect import path.","error":"Error: Cannot find module 'rollup-plugin-svg'"},{"fix":"Change import to: import svg from 'rollup-plugin-svg' (remove curly braces).","cause":"Using named import instead of default import.","error":"TypeError: svg is not a function"},{"fix":"Add svg() to plugins array in rollup.config.js.","cause":"Rollup not configured to handle SVG files; plugin not included.","error":"Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}