Broccoli-svgstore NPM

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: {}
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' }
        }
      }
  });
```