Easiest way to arrange layers into a sprite formation using Illustrator CC

Question

I have been provided an .ai file containing icons for a website project (hundreds of the things). The file consists of all the icons on a single layer each, filling the space of a single artboard for the entire project (see below).

I need to arrange all of these icons into a sprite formation whereby each icon has 6 different color variations. So if there are 100 icons, the sprite image would be 100px x 6px artboard sizes big. From there, I can resize the entire artboard if the client ever needs the sprites at a different size.

The only way I can currently think of doing it is displaying each layer one by one, save it as a web image (transparent .png), import into Photoshop and manually arrange into the sprite layout (using color overlay for the different colors). However, this is going to take hours.

There must be a more automated way to achieve this since every icon is the exact same size (if you include the artboard behind it).

Many thanks for your help.

Answer 1

How about this (not perfect but a bit faster)

1. Replicate the artboard as many times as icons you have. You can use the Artboards panel to replicate them.
2. Each artboard will have ALL the icons. Show only one icon per artboard and hide the rest (or delete them)
3. Use object->artboards->rearrange to arrange the artboards in a grid or a row (whatever your sprite arrangement should be)
4. Save for Web and unselect "Click to Artboard". All the artboards will be exported together as a single image.

You still need to hide (or delete) a lot of icons per artboard but it is less work than exporting and arranging each one of them.