Optimise Icons - Githubissues

humanmade / hm-pattern-library

Juniper is the web style guide and pattern library for Human Made projects.

https://humanmade.github.io/hm-pattern-library/

25 stars 8 forks source link

Optimise Icons #109

Open mattheu opened 7 years ago

mattheu commented 7 years ago

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: https://github.com/humanmade/hm-pattern-library/pull/108 https://github.com/humanmade/hm-pattern-library/issues/35

dashaluna commented 7 years ago

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