Registry / rollup-plugin-svg-import

rollup-plugin-svg-import

library3.0.0jsnpmunverified

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.

npm install rollup-plugin-svg-import

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-SVG-

rollup-plugin-svg-import

javascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default export

✓ import svg from 'rollup-plugin-svg-import'

✗ const svg = require('rollup-plugin-svg-import')

Plugin is ESM-only; CommonJS require fails in Node <18 or without transpilation.

plugin usage

✓ import svg from 'rollup-plugin-svg-import'; export default { plugins: [svg()] }

✗ import { svg } from 'rollup-plugin-svg-import'

The default export is the plugin factory function, not a named export.

imported SVG (default behavior)

✓ import icon from './icon.svg'; document.body.appendChild(icon())

✗ import icon from './icon.svg'; document.body.appendChild(icon)

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.

imported SVG (stringify mode)

✓ import icon from './icon.svg'; document.body.innerHTML += icon

✗ import { icon } from './icon.svg'

When `stringify: true` is set in plugin options, SVG files export a string directly (no function wrapper).

Shows rollup config with conditional stringify mode and how imported SVG works in both modes.

// rollup.config.js import svg from 'rollup-plugin-svg-import'; export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'esm' }, plugins: [ svg({ stringify: process.env.NODE_ENV === 'production' }) ] }; // src/index.js import icon from './icon.svg'; const svgNode = icon(); // DOM node const svgString = icon; // string if stringify: true

Debug

Known issues

breakingNode version must be >=18.0.0; older Node versions cause runtime errors.

fix

Upgrade Node to 18+ or pin to rollup-plugin-svg-import@2.x (if available).

affects: <3.0.0

breakingRequires Rollup 3.x or 4.x; Rollup 2.x is incompatible.

fix

Use rollup-plugin-svg-import@2.x for Rollup 2.x, or upgrade Rollup.

affects: <3.0.0

gotchaDefault import returns a factory function, not a DOM node. Forgetting to call the function results in inserting an HTMLDivElement object.

fix

Use icon() to get the actual SVG node; or set `stringify: true` to get a string.

affects: >=1.0.0

gotchaThe plugin does not support dynamic imports or variable filenames; SVG files must be statically analyzable.

fix

Use static import paths; for dynamic SVGs consider importing all files with glob.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: svg is not a function

Importing the plugin as a named export instead of default.

fix

Change to `import svg from 'rollup-plugin-svg-import'`.

Error [ERR_REQUIRE_ESM]: require() of ES Module

Using require() on an ESM-only package.

fix

Use import syntax or set { type: 'module' } in package.json.

The emitted file 'icon.svg' is empty

SVG file may not be found or path is incorrect.

fix

Verify the SVG path is correct and the file exists. Use absolute paths if needed.

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Not calling the SVG import as a function (default mode).

fix

Call icon() to get the DOM node, or set `stringify: true` to get a string.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

rollupoptionalpeer dependency: must be installed with Rollup ^3.0.0 or ^4.0.0

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/korywka/rollup-plugin-svg-import ↗

packagehttps://www.npmjs.com/package/rollup-plugin-svg-import ↗