Embedded SVG icon sets and Reactjs
Implementing icons in React
The push to replace static PNG icons with their most versatile counterpart, SVGs, is gaining a lot of steam. SVGs are more flexible, editable, and animatable than their PNG counterparts. In addition to this, as vector files, they are fully scaleable.
At Synapse Studios, we began implementing scalable icons about a year ago. We started with embedded icon fonts. While icon fonts were much easier to use than PNG images, they still had their pitfalls. Many times an icon font such as FontAwesome would not have all of the icons that we needed so we would have to add a second icon library to fill the gaps. This added a lot of server-side overhead so we began looking for another solution.
Enter Fontello. Fontello is a service that allows you to build a subset of the most popular icon fonts so you are only downloading the icons specific to your project. While this had its merits, we started noticing some inconsistencies in the individual font sets’ baselines and font sizes. Icons were unpredictable and difficult to align properly. We decided that in order to have the fine grained control that we wanted over our icons, it was time to embrace SVGs.
The only caveat with SVGs is that they are a bit cumbersome to maintain. In my last article, I spoke about the atomizing components in React. Using this approach, we were able to come up with a system that not only allows a maintainable SVG icon set but took one of the advantages of SVGs a step further and fully embedded every SVG into the markup.
We start by adding an SVG to a folder of icons that will be included in the project. Every SVG has the same canvas size. Although somewhat arbitrary, we happen to use a base SVG canvas of 25px x 25px.
The SVGs are then run through an SVG optimizer such as SVGCleaner to limit their complexity and get rid of unneeded embedded file information. At times the savings we see from this process are negligible but on a larger scale, it can make a huge difference.
After the SVGs are optimized, we copy the essential information from the icon and place it in a pre-formatted JSX file that we include in our frontend template.
All of these JSX icon files with embedded SVG code are then referenced in another JSX file. This secondary file includes a switch case that looks for a particular icon name in a property when the component is used. This way we only have one <Icon> component and can insert as many different icons as the project requires.
In this same file we can also define the other icon properties such as color, size and rotation. With these properties, the component looks for properties matching a certain string and applies classes to the icon accordingly. By implementing CSS attributes available to SVGs, we are able to change the fill color, stroke width and color, opacity and many other properties of the SVG.
When it comes time to use the icons, it is extremely easy to add them into the project and all of the sizing, positioning, and stylistic changes are very easy to manipulate and control. Finally, we have a predictable, scalable and customizable icon set we can rely on.
How do you manage icon sets?
