rollup-plugin-svg

2.0.0 verified Mon Apr 27 auth: no javascript maintenance

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.

Common errors

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

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

error TypeError: svg is not a function ↓

cause Using named import instead of default import.

fix

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

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

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

fix

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

Warnings

breaking Changed from default base64 to default raw markup in v2.0.0. ↓

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

deprecated Package no longer actively maintained; no updates since 2019. ↓

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

gotcha Import path must end with .svg extension; otherwise plugin won't match. ↓

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

gotcha Only 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).

Install

npm install rollup-plugin-svg

yarn add rollup-plugin-svg

pnpm add rollup-plugin-svg

Imports

svg

wrong

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

correct

import svg from 'rollup-plugin-svg'

ESM-only; no CommonJS export.

default import
wrong
```
import { logo } from './image.svg'
```
correct
```
import logo from './image.svg'
```
SVG files are imported as default export (string). Named imports not supported.

base64 option

wrong

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

correct

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

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

Quickstart

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