Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including svg-spritzer with all npm packages installed. Try it out:

var svgSpritzer = require("svg-spritzer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

svg-spritzer v0.2.5

SVG spriting the way I want it.


Note: I made this before finding out about svgstore, (this is why you put a delimiter between identifyers!). It has more features, support, and likely a better future.

Sprite SVGs into a single SVG like this:

<svg style="position: absolute; width: 0; height: 0;"
width="0" height="0" version="1.1" xmlns=""
    <symbol id="icon1" viewBox="0 0 32 32">
        <path d="M18 15l7 7h-5v8h-4v-8h-5l7-7z"></path>
    <symbol id="icon2" viewBox="0 0 32 32">
        <path d="M18 10l4 4-8 8-4-4zM31.298 12z"></path>

So you can use them like this:

    <svg viewBox="0 0 32 32">
        <title>icon 1</title>
        <use xlink:href="/icons.svg#icon1"></use>

And you make it like this:

const svgSpritzer = require("svg-spritzer"),
    glob = "**/*.svg";

    .then((data) => {
        // data is a string of sprited SVG

Or like this:

], {
    output : "./output.svg"
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free