After figuring out how to use icon fonts I then stumbled across “stackicons”.
Icon fonts are great but limited to being one colour. Not with a stackicon however. The idea is to stack icon characters on top of one another and set the right colour for each. I created a set of stackicons to represent the colour and status of a hive’s queen bee. Each queen has a standard bee shaped background and a coloured circle with an inner icon representing the queen status (healthy, failing, dead).
- Created the icon font with five SVGs (bee, circle, cross, tick, re-queen).
- Set the positioning of the icons within an i element.
- Set the colours for the individual characters.
- Sit back and relaxed.
Above I’ve created a queen icon with a red circle and tick. I love the resilience to change of this system. For example, when these icons were tested it was found that a queen could be white but the inner icon was white and not visible. Rather than talking to a designer, getting an icon and adjusting the sprite sheet I simply added this condition to the SASS.
I like this ease of change when I build systems. It is worth noting that it increases the level of abstraction and it is harder for other developers to understand what is going on. That’s easily rectified with a top-notch and well maintained styleguide. In the end the ability to make changes quickly wins out in the long run.