A while back we took the decision to move from an icon font to an SVG solution. The reasons for this, and our eventual implemenation are covered in this blog post.
Critical vs Non Critical
We split our icons out into two categories: critical and active. For critical icons we serve fallback PNGs to browsers that don't support svg. Non-critical icons are considered complementary and will not be served to legacy browsers.
Adding a new icon
By default, icons are deemed non-critical. To add one:
- Copy the svg file into
- Commit the results
This grunt task will optimise all the svg files and then create a stylesheet with the SVG data-uri included.
Making the new icon critical
We only class icons as critical if the UI would be unusable without it. If an icon is complementary, for example next to some text, this doesn't need to be served to all browsers. To add a critical icon:
- Add the icon to the above directory as normal
- Create a symlink to this file within
rizzo/app/assets/images/icons/active/criticalby running the following command within the critical folder.
ln -s ../[icon-name].svg [icon-name].svg`
grunt icon can sometimes produce a lot of noise in the diff as svgmin will run on all the svg files - transforming them but not saving them. For this reason it's often better to only add the files you want into git and discard the rest.