rollup-plugin-inline-svg

3.0.3 verified Mon Apr 27 auth: no javascript

Rollup plugin that inlines SVG files as strings or data URIs. Current stable version is 3.0.3 (released 2022). Requires Rollup as a peer dependency. Supports both ES modules and CommonJS output. Key differentiator: lightweight, TypeScript types included, and allows custom transformations via options. Alternatives like @svgr/rollup focus on React components, while this plugin is framework-agnostic and simpler for raw SVG inlining.

Common errors

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

cause Package not installed or outdated path.

fix

Run 'npm install rollup-plugin-inline-svg' or ensure it's in package.json.

error TypeError: inlineSvg is not a function ↓

cause Incorrect import (named instead of default).

fix

Use 'import inlineSvg from "rollup-plugin-inline-svg"' (default import).

error The 'dataUri' option is not supported before version 3. ↓

cause Using option introduced in v3 with older version.

fix

Upgrade to v3.0.0+ or remove the dataUri option.

Warnings

gotcha SVG files must be imported with ?inline query parameter to trigger the plugin. ↓

fix Use import icon from './icon.svg?inline' instead of plain './icon.svg'.

gotcha The plugin returns the SVG as a string, not a data URI by default. Use the `dataUri` option to get a data URI. ↓

fix Add option { dataUri: true } to inlineSvg().

breaking Version 3.0.0 removed support for CommonJS output by default; now ESM only. ↓

fix If you need Rollup to output CommonJS, use @rollup/plugin-commonjs or set output.format to 'cjs' and ensure the plugin works with it.

deprecated Option 'include' and 'exclude' are deprecated in v3 in favor of Rollup's built-in filter. ↓

fix Use Rollup's own include/exclude patterns via the plugin's options or Rollup's 'watch' options.

Install

npm install rollup-plugin-inline-svg

yarn add rollup-plugin-inline-svg

pnpm add rollup-plugin-inline-svg

Imports

inlineSvg

wrong

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

correct

import inlineSvg from 'rollup-plugin-inline-svg'

Default export only. Named import will result in undefined.

Quickstart

Shows how to import and configure the plugin in a Rollup config, including custom transform and SVG import example.

import inlineSvg from 'rollup-plugin-inline-svg';

// rollup.config.js
export default {
  plugins: [
    inlineSvg({
      // Optional: specify directories for svg files
      paths: ['src/svg'],
      // Optional: define custom transform function
      transform: (svg, id) => {
        // e.g., minify or modify svg string
        return svg.replace(/\s+/g, ' ');
      }
    })
  ]
};

// Usage in JavaScript:
// import icon from './icon.svg?inline';
// console.log(icon); // '<svg>...'