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

0.4.2 -- April 5, 2017

• Remove unnecessary (and broken-in-Windows) check for absolute path on this.outputPath (#31).

0.4.1 -- January 9, 2017

• Fix incorrect behavior of setting inline to true when calling svgOutput.toString()

0.4.0 -- December 20, 2016

• Update to svgstore @ 2.x.
  • Supports passing options to the new svgstore options API that includes the ability to define mappings of custom <symbol> attributes and custom root <svg> attributes (#24).

0.3.1 -- September 13, 2016

• Update project licensing

0.3.0 -- September 13, 2016

• Add ability to set svgstore options on a per-file basis (#16)

0.2.1 -- August 28, 2016

• Use svgstore implementation of svg-to-symbol conversion #13

0.2.0 -- August 03, 2016

• Replace broccoli-writer with broccoli-caching-writer and begin conforming to its API.
• Update miscellaneous deps from two-year old project.
• Set up an initial test harness for the project.

0.1.0

• Initial release