Nocturnal Pumpkin Maelstrom

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

      This feature is exclusive to Teams

      Illustration of wombats

      The package file explorer is only available for Teams at the moment.

      We may support exploring this package in the future. Check back soon.

      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