Icon system with 

SVG & SASS

Or :

 How to make simple, smart & effective icon system 

Problematic : 

On some projects, you can end up with some huge 

icons system, a same icon, in three of four version

to handle all the possibilities

For example, a twitter icon can be white, or blue, depending it's context. 

With the old fashion way, we use to have 2 different icon versions, a blue and a white, or just a huge PNG sprite file.

I was working on a company that had 

an old way to generate icons, making X calls to the server, and sometimes, the same icon was in 3 different versions, so for a page, 3 server requests, to display 3 times the same icon, with some different colors.

I needed to make it easier to handle, starting by getting all the icons in SVG, getting rid of our old icon.css file, and I wanted to use a SASS loop to re-generate the CSS, automatically

First solution : 

My first solution was to write a @mixin, 

that looped over each icon names (Twitter) and icon colors (red, blue, green)

To generate a clean icon, using background image, and SVG.

One of the benefit was also the browser support : 

On the browser support front, the danger zones are IE 8 and down, Safari 5 and down, iOS 4.3 and down, and Android 2.3 and down. But if your policy is "the last two major versions" - you're looking at pretty much 100% support

From css-tricks : 

It was working, but the output css was really huge.

Replacing a problem, by an other, wasn't a great solution.

So I kept working on it, and finally, the Second iteration was what I wanted.. 

The second solution was smarter, I wanted to use those 

SVG sprites, I heard it was really powerful, and could

fix my problem. 

 - 

Once my svg sprite was ready, all I needed was basically to make a simple sass loop, with only one color parameter, and to call my icons on the HTML side

-

It would allow me to call the same icon X times, with as much modifications as I wanted on it, reducing the number of server requests,providing better looking icons, and making our "icon logic" more flexible

Second solution :