A simple Broccoli task to combine SVG files as described in a recent CSS Tricks article for SVG sprite-based icon systems. Comparable to grunt-svgstore and gulp-svgstore. Heavily inspired by broccoli-concat.
npm install broccoli-svgstore --save
The filter accepts one input tree full of SVG files and outputs a tree with a single file as named by the outputFile option.
var svgstore = require("broccoli-svgstore");
var outputTree = svgstore(inputTree, {
outputFile: "/assets/icons.svg"
});Inject the file into an HTML document and use <svg><use xlink:href="icon-name"></svg> to place an image on the page.
This was created in a couple of hours to take SVGs from Sketch to a webapp using Broccoli. Options are pretty sparse, there are no tests, and no other use cases have been considered so far. It's little more than a proof-of-concept in its current state.
Pull requests welcome. Please try to keep things consistent with the philosophy of Broccoli & the spirit of the surrounding plugin community.
initial release