So you finally finished your amazing icon set, and want to upload it as SVG files on Iconfinder. Here is a quick tutorial (my first) that will show you, how to export multiple icons from Illustrator to SVG with a single click.
First of all, I have give credit to Tom Byrne for making the script, we’re going to use. Great work buddy!
This tutorial is short but effective. You could say that is sort of the point by scripting in the first place. It’s all about automating your workflow to be more effective and keep focus on your creativity.
Normally exporting multiple layers for something like icon sets can be quite tedious, but now it doesn’t have to be. Just take a few minutes follow these simple instructions. It will save you hours of work.
This Tutorial will be in 3 steps:
1. Preparing your illustrator file
2. Downloading & Installing the script
3. Exporting your icons
Part 1: Preparing your illustrator file
Make sure all your icons are are in separate layers, and place them in root in the layers panel (see screenshot). An icon can have multiple sublayers, that won’t affect the export.
Part 2: Downloading & Installing the script
Download the newest version of the script from Github.
[button size=”medium” url=”https://gist.github.com/TomByrne/7816376/download” text=”Download script”]
Now place the script in your Illustrator Scripts folder:
C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\Scripts
OSB: You have to restart Illustrator after installing the script. Otherwise it won’t be visible in the menu.
Part 3: Exporting the icons
To export your icons, go to the menu: File > Scripts > MultiExporter
A modal will open and present you with a lot of options for stuff like prefixing and format. Remember to select SVG as your format.
Also remember that the default filenames will be the name of your layer. So name your layers before exporting.
That’s it, hours of manual labor saved by a simple, but powerful script.
By the way. The icons used in this tutorial are the beautiful Flat-icons by Pix3lize.
[divider line=”true”] [recent_posts]