Registry / web-framework / rollup-plugin-svg

rollup-plugin-svg

library2.0.0jsnpmunverified

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.

web-framework

npm install rollup-plugin-svg

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-SVG

rollup-plugin-svg

web-frameworkjavascriptv2.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.

svg

✓ import svg from 'rollup-plugin-svg'

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

ESM-only; no CommonJS export.

default import

✓ import logo from './image.svg'

✗ import { logo } from './image.svg'

SVG files are imported as default export (string). Named imports not supported.

base64 option

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

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

Function is default export; must import default. Option 'base64' on the function call.

Basic setup: import SVG as raw markup (default) and use in DOM.

// rollup.config.js import svg from 'rollup-plugin-svg' import { nodeResolve } from '@rollup/plugin-node-resolve' export default { input: 'src/main.js', output: { dir: 'dist', format: 'es' }, plugins: [ nodeResolve(), svg({ base64: false }) ] } // src/main.js import myIcon from './icon.svg' // Insert raw SVG markup document.body.appendChild(myIcon) // Or as base64 data URI (if base64: true) const img = document.createElement('img') img.src = myIcon

Debug

Known issues

breakingChanged from default base64 to default raw markup in v2.0.0.

fix

Set base64: true in plugin options if you relied on base64 output.

affects: >=2.0.0

deprecatedPackage no longer actively maintained; no updates since 2019.

fix

Consider switching to @rollup/plugin-image or rollup-plugin-url for continued support.

affects: *

gotchaImport path must end with .svg extension; otherwise plugin won't match.

fix

Ensure import statements include .svg extension: import logo from './logo.svg'

affects: *

gotchaOnly works with Rollup; not compatible with other bundlers like Webpack or Parcel.

fix

Use appropriate plugins for other bundlers (e.g., webpack's url-loader).

affects: *

Errors

Common errors & fixes

Error: Cannot find module 'rollup-plugin-svg'

Missing installation or incorrect import path.

fix

Run npm i -D rollup-plugin-svg and ensure import line is correct: import svg from 'rollup-plugin-svg'

TypeError: svg is not a function

Using named import instead of default import.

fix

Change import to: import svg from 'rollup-plugin-svg' (remove curly braces).

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Rollup not configured to handle SVG files; plugin not included.

fix

Add svg() to plugins array in rollup.config.js.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

rolluprequiredPeer dependency; required as plugin for Rollup bundler.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/antony/rollup-plugin-svg ↗

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