broccoli‑svgstore

broccoli‑svgstore

For the uninitiated, Broccoli is an awesome build tool for front-end webapps. It presents a simpler philosophy than task runners like grunt or gulp, focusing on transforming groups of files rather than organizing and performing arbitrary actions. I highly recommend checking it out if you spend lots of time architecting your grunt or gulp setup as I once did.

Last week I took my first crack at writing a Broccoli plugin: a filter to combine multiple SVG images into one definition block. It’s a concept that more or less originated with Chris Coyier’s excellent article on using SVG as an icon system, which inspired grunt-svgstore and gulp-svgstore — both of which are excellent implementations of the idea for their respective task system. I really missed the functionality when I started using Broccoli, so after two frustrating hours, broccoli-svgstore was born.

It’s still in a very early stage of development — there are no tests or options — but I’m already using it with great success on a couple of internal projects. Check it out on github for usage & installation instructions, and don’t forget to read the CSS Tricks article to see what this SVG sprite thing is all about.

Development