We use a lot of icons in BranchCMS to add more visual clues to the different actions that you can do.
For example, we use a "save" icon with the Save buttons.
And there are a lot of icons with our tables that show lists of items like a list of blog posts.
We started out a long time ago using PNG and GIF images for the icons. Then a few years ago we switched to font icons. First we used Font Awesome icons (which really is awesome) and more recently we switched to to the IcoMoon font icons.
Why we switched to SVG
There has been a lot of talk lately about the advantages of using SVG over fonts for icons. See these two articles for example: Ten reasons we switched from an icon font to SVG and Delivering Octicons with SVG.
For us, the biggest reasons were:
- sometimes the icons wouldn't show and you end up with just a box
- potential issues with the unicode characters
- users have the ability in browsers to set their own styles and fonts and that could conflict with the icon font
- better scalability
- content sometimes jumped around when the font was loaded
Those are similar reasons that other folks have had and they were big enough for us to decide to take this project on.
How we did it
The process of switching from a font icon to SVG wasn't as painful as we thought it would be. We get our icons from Icomoon and they provide the icons either as as a font or as SVG files so generating the icons wasn't going to be a problem. Our biggest hurdle was how to actually use the SVG icons.
There are four main choices for implementing SVG icons.
- Load the SVG like you would an image. Set the 'src' attribute for the <img> tag to be the path to the SVG.
This didn't allow for changing the color of the icons. Plus, for pages that have a lot of icons it would be that many more requests to the servers. - Use background images.
Same issues as #1. - Embed the entire "svgstore" (a map of all the icons) on the page and show the icons using <use>
This seemed overkill to load all icons on every page (we use a lot). Plus, we found that the icons were not as crisp as they could be, particularly in Firefox. This could be an issue with the Icomoon icons, or it could simply be a browser implementation issue. - Embed the SVG code for each icon.
This is what we went with.
We don't do multi-color icons and we don't need to animate icons so that made our implementation a little easier.
We found that by embedding the SVG code for each individual icon directly in the HTML we got the best looking icon and we were able to style it the way that we wanted.
We have a helper class in our code that centralize delivering the code for each icon. To make things easier for us we ended up writing a little Node.js script to parse all of the SVG icon files and output a streamlined version for us to use in our helper class. This makes it a lot easier to update our icons and keep things consistent.
Below is an example of the SVG that we use for the "information" icon.
<svg class="Icon Icon-infoFull" width="16" height="16" viewBox="0 0 16 16" role="img">
<path class="Icon-path1" d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM7 3.75c0-0.413 0.338-0.75 0.75-0.75h0.5c0.412 0 0.75 0.337 0.75 0.75v0.5c0 0.412-0.338 0.75-0.75 0.75h-0.5c-0.412 0-0.75-0.338-0.75-0.75v-0.5zM10 13h-4v-1h1v-4h-1v-1h3v5h1v1z"></path>
</svg>
Here is the basic styling that we do for each icon.
.Icon {
display: inline-block;
fill: currentColor;
height: 1em;
vertical-align: -10%;
width: 1em;
}
svg:not(:root) {
overflow: hidden;
}
The result
Overall we're really happy with the way that the icons look in BranchCMS and how we can use them. We don't support IE 8 so we're not worried about PNG fallbacks, which made this a lot easier. Since we implemented this we've updated and added new icons at least a dozen times. The process has been smooth and most likely undetected by most of our users, which is ok by us.