Skip to content

Broccoli plugin to combine SVG files using <symbol>

License

Notifications You must be signed in to change notification settings

esridc/broccoli-svgstore

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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: {}

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

About

Broccoli plugin to combine SVG files using <symbol>

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%