Let’s say you want to display an icon. You might import the source file into your component and display it. But what happens when you need to change the color of that icon? You could do a couple different things:
- Duplicate the file and change its color value
- Use CSS to change the fill or stroke color value
The problem with the first approach is that you’ll end up with a new file for every color variation. You’ll need to update each variation to make even the slightest tweak to the source artwork.
Instead of duplicating the file, we could use CSS to style the icon. This approach is fine on the surface but has some implicit requirements. For example, let’s say your icon has both fills and strokes (borders). You’d write something like:
svg g, svg path {
fill: red;
stroke: red;
}// Example on CodePen
The problem with this approach is that your stroke will be added to the selected elements whether they already have one or not. So the flag icon in our example gets a stroke (border) around the checkered pattern, which is not what we want since it changes the icon shape. So what’s a better approach?
Introducing: currentColor
If you set the icon’s fill/stroke/etc; value to currentColor the element will inherit the closest CSS color value. This means the icon behaves just like text, so we can do something like the example below. (The icon will be red, but since this is just CSS we can change the value, animate it, etc;)
svg {
color: red;
}This is a super-focused take on the CSS Tricks approach to cascading SVG fill color so check that out for more details.
Bonus resources:
Totally Tooling Tips
A YouTube channel produced by Googlers about web development techniques. I find this useful when an article is too dry.
Progressive React apps
A series of 4 articles about building progressive React apps. A solid mix of techniques, workflows, and resources. (October 2016)
User interfaces at 60 frames per second
A 30 minute talk delving into performance tools and techniques
🍍 Fun fact
Pineapples can take up to two years to reach full size, so we eat them when they are much smaller. If they are left to their own devices they can grow a lot bigger.The world record is currently 18.25lbs (which is almost as much as the world’s heaviest birth: 22lbs)
