Things I Learned Using an SVG Icon System in Production
Building websites is awesome. Building websites that use SVG’s for icons is even more awesome, but it has its challenges.
How we did it over the years:
We all started somewhere with building websites. I started about 10 years ago. Back then I created my designs in Photoshop, cutted it into pieces and stitching it back together with background images on <div> elements.
Back in those days we used .png files to render an icon within a button. Nowadays with the introduction of retina displays we are aiming for super high-res icons. That makes SVG icons the best pick.
Various ways of using SVG:
Using SVG icons can be done in various ways.
For example you can:
- Use the .svg file in a <img> tag
- Convert it into base64 string and use it as a background image of any element.
Unfortunately these solutions have a major drawback: you cannot change the color of the SVG.
Changing colors depending on text color:
When a button background color changes from black to white you will probably change the text color of the button as well.
It will force you to also render the .svg file with a different background color in order to still see it.
A simple solution is to drop the whole SVG just inline in your HTML file. Then you can change the fill-color of the .svg.
Drawbacks: inline SVG’S can take up quite some lines and are not re-usable.
SVG sprite sheets:
I can hear you think: “What IS the way to use SVG’s?”.
I’m a huge fan of SVG sprite sheets. It is one SVG file that you can import on every page and you can pick a defined symbol in that SVG file to render.
Example of how a sprite sheet can look:
Next, you can import any of these symbols as SVG icon in your HTML by using the <use> tag (see example below).
If you want to change colors, you can just apply some CSS to the SVG.
Ultra-pro-tip: You can also use the attribute ‘currentColor’ in your CSS.
As you can see in the image above, our SVG with the class .base-icon will fill the SVG with ‘currentColor’. It is using any value defined on the ‘color’-property of the element itself or the parent-elements.
In this case when the SVG will be placed inside any <button>, its fill color would be red.
When you hover the button, the fill color of the SVG will automatically be blue.
Magic! 🌈
Next steps:
If you are eager to learn more about this approach, I can suggest the following sources:
