svg-spritzer

    0.2.6 • Public • Published

    svg-spritzer

    Note: I made this before finding out about svgstore, you probably want that instead.

    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

    0

    Version

    0.2.6

    License

    ISC

    Unpacked Size

    6.55 kB

    Total Files

    5

    Last publish

    Collaborators

    • kevinkace