{"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,"search_vec":"'18':19 '3.0.0':16,22 '4.0.0':23 'altern':53 'beyond':68 'configur':36,63 'default':25 'depend':67 'direct':12 'document.createelementns':33 'dom':30 'file':11 'import':5,9,26,41,73 'javascript':14,70 'lightweight':52 'minim':62 'node':18,31 'plugin':3,7,59,72 'raw':44 'requir':17 'rollup':2,6,21,58,69,71 'rollup-plugin-svg':57 'rollup-plugin-svg-import':1 'runtim':66 'ship':48 'ssr':47 'string':45 'stringifi':38 'svg':4,10,27,60,74 'svgr/rollup':55 'true':39 'type':50 'typescript':49,75 'use':32 'version':15","created_at":"2026-04-27T17:04:08.773675+00:00","updated_at":"2026-04-27T17:04:08.773675+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/korywka/rollup-plugin-svg-import","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rollup-plugin-svg-import","openapi_spec":null,"status_page":null,"smithery":null,"categories":[],"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}}