It's been a long time coming, but we're very happy to announce the initial release of our Illustrator SVG Exporter and SVG Grunt Toolkit which delivers on a promise we made way back when Iconic was a humble Kickstarter project.
Two tools, one workflow
These two tools are intended to work together. The Illustrator SVG Exporter is designed to let you focus on drawing your vector assets and getting you out of the application as quickly as possible. The Grunt toolkit is focused on doing all the things Illustrator clearly isn't streamlined for—mainly super-fast color adjustments, asset export in different formats/sizes and prepping SVG for better CSS styling. You should never have to color and individually export your icons again.
Illustrator SVG Exporter
The Iconic team uses Adobe Illustrator for drawing our icons. It's a long way from perfect, but at the time we started building the icon set it had a significant advantage in script-ability. We built a fairly complex and bespoke Illustrator script for Iconic. Through the process of making (and using) that script countless times, we've put together a new tool for general use that we think is much faster and more elegant than its predecessor. I've been using it almost daily for projects and (while I may be biased) it's my go-to tool for exporting SVGs from Illustrator.
For the full skinny on the exporter, head over to the Github project page where you can read about how it works and how it can make your life easier.
We've made this tool open source under the MIT License, so feel free to use it however you'd like. We'd love to see someone port this script to Sketch. Feel free to hit us up if you have any questions.
There are a lot of automation tools focused on SVG at this point. We didn't want to release a "us too" toolchain which does nothing different than anything else out there. We also didn't want to make something unique just for the sake of being unique and in turn have it be useless.
The toolkit helps you work with SVG input files by normalizing, colorizing, styling and optionally converting to other formats. We've all gone through the laborious task of recoloring our icons, it's not fun. This will help make the process faster.
The coolest thing the toolkit does is it allows you to use CSS to color your SVGs and PNGs. This is great if you want to set different colors for different icons or multi-colored icons. Our Illustrator SVG Exporter uses layer/path names to generate IDs. Our toolkit converts those IDs to classes which you can use to achieve awesomeness.
Wow, that wasn't easy
Of all the promises we've made, this has easily been the hardest to define and package up. Our initial concept was to simply release our internal toolkit as an open source project. That seemed like a great idea at the time, but the further we got into actually making the toolkit, the clearer it became how much of a disaster that would be.
SVG has come a long way, but the tools we use to actually create them are inadequate at best. I could go on a long diatribe about how our tools are letting us down, but that's another blog post altogether. Much of our internal toolchain is built around fixing all the inadequacies of how SVG is typically generated so we can actually do all the stuff Iconic does.
Here's the rub, pretty much every vector drawing tool out on the market is "special" in their own special little way. So if we were to release our internal toolkit, we'd either force you to use the same vector drawing tool we use or make our toolkit fix the inadequacies of various drawing tools. Rock, meet hard place.
Instead of trying to recreate everything that our toolkit does (and doesn't do) well, we've tried to improve some basic workflow issues that still seem to be a slow, laborious process. Hopefully we succeeded, we look forward to you letting us know.