Registry / web-framework / rollup-plugin-inline-svg

rollup-plugin-inline-svg

library3.0.3jsnpmunverified

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.

web-framework

npm install rollup-plugin-inline-svg

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-INLI

rollup-plugin-inline-svg

web-frameworkjavascriptv3.0.3

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.

inlineSvg

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

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

Default export only. Named import will result in undefined.

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

Debug

Known issues

gotchaSVG 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'.

affects: *

gotchaThe 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().

affects: >=3.0.0

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

affects: 3.0.0

deprecatedOption '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.

affects: >=3.0.0

Errors

Common errors & fixes

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

Package not installed or outdated path.

fix

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

TypeError: inlineSvg is not a function

Incorrect import (named instead of default).

fix

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

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

Using option introduced in v3 with older version.

fix

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

Upgrade

Version history

3.0.3latest on npm

Audit

Dependencies

rolluprequiredpeer dependency required to use the plugin

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/sionzee/rollup-plugin-inline-svg ↗

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

homepagehttps://rollup-plugin-inline-svg.pages.dev ↗