esridc/broccoli-svgstore

Broccoli plugin to combine SVG files using <symbol>

broccoli-svgstore

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.

  • See: svgstore's options documentation

  Required: false Default: {}

• prefix {string}: a prefix that will be prepended to each <symbol>'s id

  Required: false Default: undefined

• 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' }
          }
        }
    });