broccoli-symbolizer

Broccoli plugin to combine SVG files into one as symbol elements.
It's related to grunt-svgstore and gulp-svgstore.

Installation

npm install --save-dev broccoli-symbolizer

Usage

var Symbolizer = require('broccoli-symbolizer');
var outputNode = new Symbolizer(inputNode, {
  outputFile: '/assets/symbols.svg',
  prefix: 'icon-',
  svgAttrs: { xmlns: 'http://www.w3.org/2000/svg' }
});

The output file content could be:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-person" viewBox="0 0 16 16">
    <title>Person icon</title>
    <path d=""/>
  </symbol>
  <symbol id="icon-mobile" viewBox="0 0 24 24"><path d=""/></symbol>
</svg>

Options

outputFile

Type: String
This option is required.
A path to the resulting SVG file that will content symbol elements.

prefix

Type: String
Default: ''
A string that is used to prefix each symbol ID.

svgAttrs

An object that is used to generate attributes for the resulting SVG file.
Type: Object
Default:

{
  style: 'position: absolute; width: 0; height: 0;',
  width: '0',
  height: '0',
  version: '1.1',
  xmlns: 'http://www.w3.org/2000/svg',
  'xmlns:xlink': 'http://www.w3.org/1999/xlink'
}

will result in:

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
[...]

stripPath

Type: Boolean
Default: true
Remove filepaths from symbol IDs.

idGen

Type: Function
Default: `(path, { prefix }) => ${prefix}${path}.replace(/[\s]/g, '-')`
This option accepts a function which takes a relative SVG filepath and a symbol ID prefix. It returns a string which will be used as a symbol ID.

persist

Type: Boolean
Default: true
Enable\disable a persistent cache to improve build performance across restarts. Check out broccoli-persistent-filter for more details.

Running Tests

npm install
npm test

License

This project is distributed under the MIT license.

---

GitHub @ivanvotti  ·  Twitter @ivanvotti