svg-sprite-kit

Bundles SVG icons from a folder into a single SVG sprite file. Zero dependencies, recursive scanning, id isolation, IconName types. React, Vue, Svelte and Angular — through Vite, webpack, a CLI, or Next.js without a plugin.

Everything below is built by the package itself, from the icons in demo/icons.

npm GitHub Documentation 
npm install -D svg-sprite-kit

14 icons in one sprite

This grid is the sprite: every tile is a <use> pointing at a symbol. Click a tile to copy its #id. The same page, with search included, is generated for you by the demoFilePath option.

Nothing matches.

Names come from the file tree

A symbol's id is the file path, with the symbolId template deciding the shape of it.

FileDefault [dir]-[name]Reference
arrow-left.svgarrow-left<use href="/sprite.svg#arrow-left">
ui/nav/menu.svgui-nav-menu<use href="/sprite.svg#ui-nav-menu">
gradient/sun.svggradient-sun<use href="/sprite.svg#gradient-sun">

isolateIds — gradients stop stealing each other

Both icons were exported with id="a" for their gradient, which is what drawing tools produce. In one document the browser resolves both references to whichever id it met first.

isolateIds: falseids left as they were
The sun is painted with the moon's gradient — whichever id="a" came first in the document wins.
isolateIds: truethe default
Each icon keeps its own gradient.

isolateClasses — one .st0 no longer wins

CSS inside a <symbol> is not scoped to that symbol. Illustrator names every icon's class .st0, so in a shared document the last rule in the file repaints all of them.

isolateClasses: falsethree icons, three different colors in the source
All three collapse into the color of the last rule.
isolateClasses: truethe default
Every icon keeps the color it was drawn with.

currentColor — icons follow the text

The icons on the left keep the colors baked into the files. On the right the same icons were built with currentColor: true, so CSS on the parent drives them. Pick a color:

currentColor: falsethe default
Colors stay as exported, whatever the CSS says.
currentColor: truebuilt with the option on
One CSS property repaints the whole set.

And this is why the option is off by default. A two-tone icon loses the second tone — here the white glyph is repainted along with the disc behind it. Gradients, on the other hand, survive: url(...) references and stop-color are left alone, which is why the sun looks the same either way.

→
Two-tone icon — the white glyph sinks into the disc behind it.
→
Gradient — untouched, because url(...) is left alone.

How this page was built

Three sprites, one command each, all from the same folder of icons — no manual editing involved.

svg-sprite-kit ./demo/icons -o ./docs/sprite.svg
svg-sprite-kit ./demo/icons -o ./docs/sprite-raw.svg --no-isolate-ids --no-isolate-classes
svg-sprite-kit ./demo/icons -o ./docs/sprite-current.svg --current-color