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 400,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.1

SVG spriting the way I want it.

svg-spritzer

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="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="icon1" viewBox="0 0 32 32">
        <title>icon1</title>
        <path d="M18 15l7 7h-5v8h-4v-8h-5l7-7z"></path>
    </symbol>
    <symbol id="icon2" viewBox="0 0 32 32">
        <title>icon2</title>
        <path d="M18 10l4 4-8 8-4-4zM31.298 12z"></path>
    </symbol>
</svg>

So you can use them like this:

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

And you make it like this:

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

svgSpritzer(glob)
    .then((data) => {
        // data is a string of sprited SVG
    });

Or like this:

svgSpritzer([
    "./icons.svg",
    "!output.svg"
], {
    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