Where does someone start with icon consistency? In the beginning, we slowly replaced pngs with an iconfont generated by icomoon. With a team steadily growing and an increasing amount of icons, reliable versioning and a single source of truth are necessary constraints.
Looking under the roof
There have been three ways of using an icon in the interface before this project.
- a class in the html like icon-trash-bin
- the entity for the font in css like content:"\e536";
- a scss-variable which stored the entity. content: $trashbin;
Defining the scope
Using icomoon to perform the needed tasks caused the following problems:
- There is no source control. You can’t roll back. It takes practice and awareness to know how to add an icon without changing the character code
- The sass variables have been created manually and were named differently than the icons. So finding the variable which stored an altered char-code was… challenging
- We needed three fonts. For the presentational website, the user-facing website and the cms. So changing one icon came with a threefold risk and effort.
The featureset of the betterSolution™:
- Single-source of truth for icons
- Automatically create char-code-variables
- Reliable versioning
- Generate 3 fonts with the same icon source
Get to business
Let me introduce you to my new friends
I used the gulp-iconfont package that does a good job with creating font files out of a bunch of svgs.
What I had to build manually was a way to take the svg names and the char codes and turn them into sass variables. Additionally to generate not one but three iconfonts out of the same svgs. For versioning we used semver so you could safely roll back to a previous icon version if something went wrong.
Later on we automated the build and deploy process with travis. To sugarcoat the whole thing we added autoreleasing based on commit styles.
To guarantee easy access the source-code organisation was done in github. Github pages came into play for an overview.
This project was my first approach in solving things on my own with gulp. Another learning was that there is a downside when lot of people reach out to consult you. It's rewarding but has to be taken with a grain of salt. At least when there is no dedicated role for a topic, everyone should be able to do it or there will be a bottleneck. With this tool under our belt I freed myself from being the person in charge of icons and created a space for collaboration and consistency.
Check out the jimdo-icons demo