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

rollup-plugin-svg-sprites

library1.2.5jsnpmunverified

Rollup plugin for creating SVG sprites, built on top of svg-baker and svg-baker-runtime, sharing the same foundation as webpack's svg-sprite-loader. Current stable version is 1.2.5, with TypeScript support. It supports both Rollup and Vite, and offers special handling for Vue 3 and React. Key differentiators include query-based imports (.svg?vueComponent, .svg?jsx), support for large numbers of SVGs via require.context, and minimal configuration. Release cadence is periodic with multiple patches. It integrates with Vue 3, React, and standard SVG usage.

web-framework serialization

npm install rollup-plugin-svg-sprites

package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-SVG-

rollup-plugin-svg-sprites

web-frameworkjavascriptv1.2.5

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 (plugin)

✓ import svgSprites from 'rollup-plugin-svg-sprites'

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

ESM-only; no default CommonJS export available.

SVG as Vue component

✓ import MyIcon from './my-icon.svg?vueComponent'

✗ import MyIcon from './my-icon.svg'

Must use ?vueComponent query for Vue 3 SFC. Without it, returns an object with id only.

SVG as React component

✓ import MyIcon from './my-icon.svg?jsx'

✗ import MyIcon from './my-icon.svg'

Must use ?jsx query for React JSX output. Without it, returns an object with id only.

Minimal setup for Rollup with SVG sprite generation, showing both basic usage and Vue 3 component import.

// rollup.config.js import svgSprites from 'rollup-plugin-svg-sprites'; import commonjs from '@rollup/plugin-commonjs'; export default { input: 'src/index.js', output: { format: 'esm', file: 'dist/bundle.js' }, plugins: [commonjs(), svgSprites()] }; // src/index.js import myIcon from './icon.svg'; console.log(myIcon.id); // e.g., 'icon' // HTML or SVG usage: // <svg><use xlink:href="#${myIcon.id}"></use></svg> // For Vue 3: // <template><MyIcon /></template> // <script setup> // import MyIcon from './icon.svg?vueComponent' // </script>

Debug

Known issues

gotchaMissing @rollup/plugin-commonjs breaks SVG import

fix

Add @rollup/plugin-commonjs to plugins array before svgSprites.

affects: >=1.0.0

gotchaVue 3 component import requires ?vueComponent query

fix

Use import MyIcon from './icon.svg?vueComponent' instead of bare import.

affects: >=1.0.0

gotchaReact component import requires ?jsx query

fix

Use import MyIcon from './icon.svg?jsx' instead of bare import.

affects: >=1.0.0

deprecatedxlink:href is deprecated in favor of href in SVG2

fix

Use href="#id" instead of xlink:href="#id" in SVG use elements.

affects: >=1.0.0

gotchaTypeScript declarations require manual type augmentation

fix

Add declare module '*.svg?*' declarations in a .d.ts file.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'svg-baker'

Missing runtime dependency svg-baker

fix

npm install svg-baker

Error: 'default' is not exported by node_modules/svg-baker/..., imported from ...

CommonJS module not converted; @rollup/plugin-commonjs missing

fix

Add commonjs() plugin before svgSprites in rollup config.

TypeError: Cannot read properties of undefined (reading 'id')

Importing SVG without proper plugin setup or missing ?vueComponent/?jsx query

fix

Ensure svgSprites() is included and use correct import query for Vue/React.

Module '"*.svg"' resolves to a non-module entity and cannot be imported using this construct.

TypeScript cannot resolve SVG import types

fix

Add type declarations as shown in README: declare module '*.svg?vueComponent' { ... }

Upgrade

Version history

1.2.5latest on npm

Audit

Dependencies

svg-bakerrequiredRuntime dependency for SVG sprite baking

@rollup/plugin-commonjsrequiredRequired to convert CommonJS dependencies like svg-baker to ESM

vueoptionalPeer dependency for Vue 3 component mode

Agent activity

6 hits · last 30 days

node

Resources

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