Build an SVG sprite
Combine several SVG files into one sprite of `<symbol>` elements, so a page can `<use href="#id">` any of them without loading each file separately, plus a usage snippet.
Build an SVG sprite merges dropped files into one sprite.svg of symbol elements, each keyed by an id built from its file name, plus a sprite-usage.txt of use snippets. A file with neither a viewBox nor numeric width and height cannot be scaled by use, so it is skipped and named in the summary. Symbol order follows drop order.
Questions
How are the symbol ids generated?
From each files own name: lowercased, non-letters and non-digits collapsed to hyphens, trimmed at both ends, and prefixed with icon- if it would not otherwise start with a letter. A repeated id gets -2, -3 and so on appended until it is unique across the sprite.
What happens to a file with no viewBox and no width or height?
It is skipped and named in the results summary, since a symbol referenced through use has nothing to tell it how to scale without one of those. Every other valid file still makes it into the sprite.
What files do I get back?
sprite.svg, the combined file of symbol elements, plus sprite-usage.txt, one line per icon showing exactly the use href snippet needed to draw it on a page.
What order do the symbols end up in?
The order you dropped the files in, unchanged; nothing here reorders or sorts them by name.
What happens if every file fails?
It refuses, listing each file name alongside the reason it can not be turned into a symbol, rather than returning an empty sprite.
Compare
| Tool | Runs on the CLI | Live as you type |
|---|---|---|
| Build an SVG sprite | Yes | No |
| SVG to JSX component | Yes | Yes |
| SVG to data URI | Yes | Yes |