Registry / devops / rollup-plugin-svg-sprite

rollup-plugin-svg-sprite

library1.0.0jsnpmunverified

Rollup plugin to extract SVG imports from your bundle and generate an external SVG sprite file, with optional optimization via SVGO. Current stable version is 1.0.0. Released on a low cadence. Key differentiators: native Rollup integration using generateBundle hook, support for SVGO optimization, minification enabled by default, and tests with 100% code coverage. Alternative to webpack-based solutions like svg-sprite-loader.

devops

npm install rollup-plugin-svg-sprite

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-SVG-

rollup-plugin-svg-sprite

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

default

✓ import svgSprite from 'rollup-plugin-svg-sprite'

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

ESM only. CommonJS require is not supported for this ES module.

svgSprite as function call in config

✓ svgSprite({ outputFolder: 'dist/public' })

✗ new svgSprite({ outputFolder: 'dist/public' })

The export is a function, not a class. Do not use `new`.

Rollup configuration import

✓ import svgSprite from 'rollup-plugin-svg-sprite'

✗ import svgSprite from 'rollup-plugin-svg-sprite/dist/index.js'

The package exports a single function from the main entry. Subpath imports are not needed.

Rollup config using rollup-plugin-svg-sprite to generate an external SVG sprite from imported SVGs.

// rollup.config.js import svgSprite from 'rollup-plugin-svg-sprite' export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ svgSprite({ outputFolder: 'dist/public' }) ] } // Then in your source files: import './svg/icon1.svg' import './svg/icon2.svg'

Debug

Known issues

breakingv1.0.0 removes the `prettify` option. The sprite is minified by default; use `minify` to control.

fix

Replace `prettify: true/false` with `minify: false` if you need unminified sprite.

affects: <1.0.0

breakingv1.0.0 drops Node 6 support. Requires Node >=8.3.

fix

Upgrade Node to version 8.3 or higher.

affects: <1.0.0

breakingv0.3.0 replaces deprecated `onwrite` hook with `generateBundle`. Using older version with Rollup >=1.0.0 fails.

fix

Upgrade plugin to v0.3.0+ and use the new `generateBundle` hook.

affects: >=1.0.0

breakingv0.3.0 sets rollup peer dependency to >=1.0.0. Incompatible with Rollup <1.0.0.

fix

Upgrade Rollup to 1.0.0 or later, and plugin to v0.3.0+.

affects: <0.3.0

gotchaThe plugin only generates the sprite file; it does not inject a reference into your bundle. You must manually include the sprite in your HTML.

fix

Add a <script> or <link> to the generated sprite file in your HTML, or use a loader that injects it automatically.

affects: >=0.1.0

Errors

Common errors & fixes

TypeError: svgSprite is not a function

Using require() instead of import, or importing from wrong path.

fix

Use `import svgSprite from 'rollup-plugin-svg-sprite'` in an ES module context.

Error: Plugin error: Cannot find module 'rollup-plugin-svg-sprite'

The package is not installed in your project's node_modules.

fix

Run `npm install rollup-plugin-svg-sprite --save-dev` or `yarn add rollup-plugin-svg-sprite --dev`.

Error: outputFolder is required

Missing required `outputFolder` option in the plugin configuration.

fix

Provide an `outputFolder` string, e.g., `svgSprite({ outputFolder: 'dist/public' })`.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/vladshcherbin/rollup-plugin-svg-sprite ↗

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