Broccoli plugin to combine SVG files using <symbol>
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.
.vscode
test
.gitignore
CHANGELOG.md
LICENSE
README.md
circle.yml
index.js
package.json

README.md

broccoli-svgstore

Latest NPM release CircleCI Build Status License Dependencies Dev Dependencies

A Broccoli plugin built on top of broccoli-caching-writer that processes SVGs with svgstore

Installation

npm install --save broccoli-svgstore

Usage

broccoli-svgstore accepts an inputNode -- or a list of inputNodes -- and converts the contents of SVG files found within each node's directory root into SVG <symbol/>s (processing them with svgstore).

The transformed content is then written into a single file (see: the outputFile option), and returned as an output node of the Broccoli build processes.

var svgstore = require("broccoli-svgstore");

var outputNode = svgstore(inputNodes, {
  outputFile: "/assets/icons.svg"
});

For a specific example, check out ember-cli-svgstore's use of broccoli-svgstore

Within your markup, you should now be able to "use" each symbol inside of other SVGs:

<svg><use xlink:href="icon-doge"/></svg>

API

  • inputNode|inputNodes {inputNode or Array of inputNodes}: A standalone Broccoli Node, or a list of them. The root of each node's source directory will form the starting point for a recursive search of .svg files.

  • options {Object}: Options for broccoli-svgstore

Options

  • outputFile {string}: The name of the file -- including any directory path -- to which output will be written (starting from the root directory of your build destination).

    Required: true Default: null

  • annotation {string}: a Broccoli Plugin annotation

    Required: false Default: null

  • svgstoreOpts {Object}: Options to be passed on to svgstore during the processing step.

    Required: false Default: {}

  • fileSettings {Object}: a hash of per-file settings. That is, each root key should correspond to a file name of an SVG that will be found in this node. It's value should then be an Object with any of the following settings:

    • id {string}: A custom id to be used for this SVG's final <symbol>.
    • svgstoreOpts {Object}: same as options.svgstoreOpts, but scoped to the file

    Example usage:

      var outputNode = svgstore(inputNodes, {
        outputFile: "/assets/icons.svg",
        fileSettings: {
          twitter: { id: 'icon-twitter' },
          menu: {
            id: 'icon-hamburger-menu',
            svgstoreOpts: {
              symbolAttrs: { preserveAspectRatio: 'xMinYMid' }
            }
          }
      });