Optimise Icons

[mattheu]

Right now we have a fairly basic icon support, but its simple and works OK, but as always there are things we could improve.

The current situation

• Each icon is an SVG in a separate file.
• CSS that uses background image to display icons.
• src files are always fill="#000000" and the gulp task generates alternate colour variations (black, white, red and blue)

Bad things about it.

• Separate file for each color variation maybe not the best for performance (although considering HTTP2... maybe not so bad?)
• If you have an alternate color on hover, then there can be a slight delay in rendering whilst its loaded.
• Built version ends up with LOTs of separate icon files.

So we discussed some things such as SVG sprites and doing something fancy to handle colour variations. @joemcgill mentioned grunticons.

Things I think are neat things about the current setup that I'd like to keep.

• SVG are nice.
• Its really easy to add new icons
• Its not complex to manage because we only have 1 source file per icon, regardless of colour variations.
• Easy to implement using a just a class or in your CSS, and there are no requirements to write specific markup, or dependencies on PHP or WordPress. I'm open to change, but wary of making things too complex.

Some background on icons:
#108
#35

[dashaluna]

FYI Some related discussion to this is in https://github.com/humanmade/Human-Made-Website-Theme/issues/350