Skip to content
SVG spriting created in my image
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
lib
test
.eslintrc
.gitignore
.npmignore
.publishrc
README.md
index.js
package-lock.json
package.json

README.md

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"
});
You can’t perform that action at this time.