rollup-plugin-svg-import

3.0.0 verified Mon Apr 27 auth: no javascript

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.

Common errors

error TypeError: svg is not a function ↓

cause Importing the plugin as a named export instead of default.

fix

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

error Error [ERR_REQUIRE_ESM]: require() of ES Module ↓

cause Using require() on an ESM-only package.

fix

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

error The emitted file 'icon.svg' is empty ↓

cause 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.

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

cause 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.

Warnings

breaking Node 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).

breaking Requires 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.

gotcha Default 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.

gotcha The 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.

Install

npm install rollup-plugin-svg-import

yarn add rollup-plugin-svg-import

pnpm add rollup-plugin-svg-import

Imports

default export
wrong
```
const svg = require('rollup-plugin-svg-import')
```
correct
```
import svg from 'rollup-plugin-svg-import'
```
Plugin is ESM-only; CommonJS require fails in Node <18 or without transpilation.

plugin usage

wrong

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

correct

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

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

imported SVG (default behavior)
wrong
```
import icon from './icon.svg'; document.body.appendChild(icon)
```
correct
```
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)
wrong
```
import { icon } from './icon.svg'
```
correct
```
import icon from './icon.svg'; document.body.innerHTML += icon
```
When `stringify: true` is set in plugin options, SVG files export a string directly (no function wrapper).

Quickstart

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