{"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,"search_vec":"'2.0.0':23 'add':46 'altern':56 'api':44 'array':49 'base64':9,41 'bundl':19 'choic':68 'config':34 'current':20 'data':10 'differenti':30 'encod':42 'file':7 'imag':77 'import':5,38,51 'javascript':54,74 'key':29 'lightweight':31 'like':53 'mainten':24 'markup':16 'mode':25 'modul':55,76 'option':40 'plugin':3,35,48,60,64 'raw':14 'recent':27 'remain':65 'rollup':2,18,59,75 'rollup-plugin-svg':1 'rollup-plugin-url':58 'rollup/plugin-image':57 'simpl':43 'stabl':21 'straightforward':67 'svg':4,6,15,37,71,78 'svg-on':70 'svgs':52 'updat':28 'uri':11 'url':61 'usag':73 'version':22 'zero':33 'zero-config':32","created_at":"2026-04-27T17:04:11.422136+00:00","updated_at":"2026-04-27T17:04:11.422136+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/antony/rollup-plugin-svg","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rollup-plugin-svg","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"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}}