Registry / devops / rollup-plugin-svg-to-symbol

rollup-plugin-svg-to-symbol

library1.0.0jsnpmunverified

A Rollup plugin that transforms SVG files into symbol strings, enabling custom sprite generation. Version 1.0.0 is the current stable release. It focuses solely on converting SVGs to `<symbol>` elements with optional SVGO optimization and custom ID extraction. Unlike broader SVG loading plugins, it outputs raw symbol markup for manual assembly into sprites. Minimal dependencies, easy to configure.

devops

npm install rollup-plugin-svg-to-symbol

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-SVG-

rollup-plugin-svg-to-symbol

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 svgToSymbol from 'rollup-plugin-svg-to-symbol'

✗ const svgToSymbol = require('rollup-plugin-svg-to-symbol')

ESM import is preferred; CJS require works but may need default destructuring.

plugin function

✓ import svgToSymbol from 'rollup-plugin-svg-to-symbol'

✗ import { svgToSymbol } from 'rollup-plugin-svg-to-symbol'

The module exports a single function as default, not a named export.

SVG import

✓ import icon from './icon.svg'

✗ import { icon } from './icon.svg'

Each SVG file is imported as a default export (string containing <symbol>).

Shows basic setup: configure Rollup plugin and import SVG as symbol string.

// rollup.config.js import svgToSymbol from 'rollup-plugin-svg-to-symbol'; export default { input: 'src/index.js', output: { dir: 'dist', format: 'esm' }, plugins: [ svgToSymbol() ] }; // src/index.js import add from './icons/add.svg'; const sprite = `<svg>${add}</svg>`; export default sprite;

Debug

Known issues

gotchaDefault symbol ID uses only the filename without extension, which may cause collisions across directories.

fix

Provide extractId option with filePath to ensure uniqueness.

affects: >=1.0.0

deprecatedOption 'svgo' expects an object, but if set to false, SVGO optimization is disabled. Type checking may fail.

fix

Set svgo to {} for default or { plugins: [] } to disable; avoid non-object values.

affects: >=1.0.0

gotchaThe plugin does not emit any CSS or assets; it only transforms imports. If you expect a file output, use with other plugins.

fix

Combine with rollup-plugin-copy or similar to output sprite files.

affects: >=1.0.0

Errors

Common errors & fixes

Error: The plugin "svg-to-symbol" doesn't support changing the order of its hooks.

Misconfigured plugin order after other transform plugins.

fix

Place svgToSymbol() after other SVG-loading plugins but before any bundling.

Cannot find module 'svgo'

svgo is not installed when custom SVGO options are provided.

fix

Install svgo as a dev dependency: npm i svgo -D.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

svgooptionalUsed for optimizing SVG files before conversion.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/fjc0k/rollup-plugin-svg-to-symbol ↗

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