Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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


npm install --save broccoli-svgstore


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>


  • 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


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


Broccoli plugin to combine SVG files using <symbol>




No packages published