{"id":22243,"library":"rollup-plugin-svg-import","title":"rollup-plugin-svg-import","description":"Rollup plugin to import SVG files directly in JavaScript. Version 3.0.0 requires Node >=18 and rollup ^3.0.0 || ^4.0.0. By default, imports SVG as a DOM node (using document.createElementNS); can be configured with `stringify: true` to import as a raw string for SSR. Ships TypeScript types. A lightweight alternative to @svgr/rollup or rollup-plugin-svg, with minimal configuration and no runtime dependencies beyond Rollup.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/korywka/rollup-plugin-svg-import","tags":["javascript","rollup","plugin","import","svg","typescript"],"install":[{"cmd":"npm install rollup-plugin-svg-import","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-svg-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-svg-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: must be installed with Rollup ^3.0.0 or ^4.0.0","package":"rollup","optional":true}],"imports":[{"note":"Plugin is ESM-only; CommonJS require fails in Node <18 or without transpilation.","wrong":"const svg = require('rollup-plugin-svg-import')","symbol":"default export","correct":"import svg from 'rollup-plugin-svg-import'"},{"note":"The default export is the plugin factory function, not a named export.","wrong":"import { svg } from 'rollup-plugin-svg-import'","symbol":"plugin usage","correct":"import svg from 'rollup-plugin-svg-import'; export default { plugins: [svg()] }"},{"note":"By default, the default export of an SVG file is a function that returns a DOM node. Calling it creates a new node each time. With `stringify: true`, the export is a string.","wrong":"import icon from './icon.svg'; document.body.appendChild(icon)","symbol":"imported SVG (default behavior)","correct":"import icon from './icon.svg'; document.body.appendChild(icon())"},{"note":"When `stringify: true` is set in plugin options, SVG files export a string directly (no function wrapper).","wrong":"import { icon } from './icon.svg'","symbol":"imported SVG (stringify mode)","correct":"import icon from './icon.svg'; document.body.innerHTML += icon"}],"quickstart":{"code":"// rollup.config.js\nimport svg from 'rollup-plugin-svg-import';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    file: 'dist/bundle.js',\n    format: 'esm'\n  },\n  plugins: [\n    svg({\n      stringify: process.env.NODE_ENV === 'production'\n    })\n  ]\n};\n\n// src/index.js\nimport icon from './icon.svg';\n\nconst svgNode = icon(); // DOM node\nconst svgString = icon; // string if stringify: true","lang":"typescript","description":"Shows rollup config with conditional stringify mode and how imported SVG works in both modes."},"warnings":[{"fix":"Upgrade Node to 18+ or pin to rollup-plugin-svg-import@2.x (if available).","message":"Node version must be >=18.0.0; older Node versions cause runtime errors.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"Use rollup-plugin-svg-import@2.x for Rollup 2.x, or upgrade Rollup.","message":"Requires Rollup 3.x or 4.x; Rollup 2.x is incompatible.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"Use icon() to get the actual SVG node; or set `stringify: true` to get a string.","message":"Default import returns a factory function, not a DOM node. Forgetting to call the function results in inserting an HTMLDivElement object.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use static import paths; for dynamic SVGs consider importing all files with glob.","message":"The plugin does not support dynamic imports or variable filenames; SVG files must be statically analyzable.","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":"Change to `import svg from 'rollup-plugin-svg-import'`.","cause":"Importing the plugin as a named export instead of default.","error":"TypeError: svg is not a function"},{"fix":"Use import syntax or set { type: 'module' } in package.json.","cause":"Using require() on an ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module"},{"fix":"Verify the SVG path is correct and the file exists. Use absolute paths if needed.","cause":"SVG file may not be found or path is incorrect.","error":"The emitted file 'icon.svg' is empty"},{"fix":"Call icon() to get the DOM node, or set `stringify: true` to get a string.","cause":"Not calling the SVG import as a function (default mode).","error":"Uncaught DOMException: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}