Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

svg-spritzer

0.2.5 • Public • Published

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"
});

Keywords

Install

npm i svg-spritzer

DownloadsWeekly Downloads

6

Version

0.2.5

License

ISC

Unpacked Size

6.66 kB

Total Files

5

Last publish

Collaborators

  • avatar