DEV Community

Cover image for The secret that the fonts industry doesn't want you to know

The secret that the fonts industry doesn't want you to know

Rémy 🤖 on May 04, 2019

One of my favorite tricks recently has become to use currentColor as a flavor to almost anything. Quite unknown for a long time, I'm pretty sure th...
Collapse
 
rpalo profile image
Ryan Palo

That half-color-change Python logo is dope, and I'm going to use this technique on my site like right now! Thank you!

Collapse
 
denisinvader profile image
Mikhail Panichev • Edited

I hate icon fonts and use this technique either with SVG sprites (symbols) and icon components.

You could also use sizing in em to reach similar experience as with icon fonts, or just for better flexibility. It's also great that you can override color and size just using CSS.

Collapse
 
xowap profile image
Rémy 🤖

Interesting, how do you manage your SVG sprites?

And yes indeed, in that case the em sizing would have been more appropriate, thanks for spotting.

Collapse
 
denisinvader profile image
Mikhail Panichev

Usually, I use SVG icon components when working with Vue or React, but sometimes when I build classic websites (eg. using PHP for rendering) I place all icons in <symbol> tags in hidden <svg> with viewBox property and use currentColor where necessary.

In the end, I have something like this:

<svg style="display: none" xmlns="..." otherReqiuredAttrs="...">
  <symbol id="icon-user" veiwBox="0 0 20 20" fill="currentColor" storke="none">
    <!-- content of SVG from graphic editor -->
    <path d="..." fill="none" stroke="currentColor" />
  </symbol>
</svg>

<!-- Use an icon -->
<button class="button">
  <svg class="icon">
    <use xlink:href="#icon-user" />
  </svg>
  Login
</button>

For .icon you can use something like this

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  width: 1em;
  pointer-events: none;
  stroke-width: 0;
  stroke: currentColor;
  vertical-align: middle;

  &[height],
  &[width] {
    height: auto;
    width: auto;
  }
}
Collapse
 
moopet profile image
Ben Sinclair

This is neat. Upvoted despite the title.

Collapse
 
cutiko profile image
Erick Navarro

Yep, title is clickbait. I fell for it. Was about to share it on Twitter but meh

Collapse
 
xowap profile image
Rémy 🤖

Hahaha sorry :)

Collapse
 
paulobef profile image
Paul Beffa

It's more of a joke than clickbait to me.

Collapse
 
lexlohr profile image
Alex Lohr

More than that, you can also use SVG color filters to derive other colors (for example a complementary color) from currentColor. Unfortunately SVG filters are not supported in some older browsers, so be sure to either not to actually require the additional color or not to support those older browsers.

Collapse
 
xowap profile image
Rémy 🤖

Yes or well hack your way with opacity, different layers, etc. I wanted to keep the use case simple but you're completely right it's quite awesome all the things you could do!

Collapse
 
lexlohr profile image
Alex Lohr

While with opacity, you can only ever mix the color, with color filters, you can get it inverted.

Collapse
 
cvanpoelje profile image
cvanpoelje

When u use scss there is also the $var option which u can use. Now that css has this option on its own, isn't it still better to use the scss variables since they are working across all browsers. When they get cross-browser I would consider using them. What do u think?

Collapse
 
pulljosh profile image
Josh Pullen

I was running into this exact problem the other day and, although I knew about currentColor, it never occurred to me to use it in an SVG! Thanks for the excellent post. 😀

Collapse
 
amouratoglou profile image
Agustin Mouratoglou

nice tip. the title is a bit too much... kinda deceiving and at the same time a very good marketing move.

Collapse
 
vuild profile image
Vuild

Excellent explanation & example. Is the camelCase essential?

I wish SVG & CSS syntax was the same where possible.

Collapse
 
xowap profile image
Rémy 🤖

Thanks!

Apparently CSS syntax is case-insensitive for these things, so you could write currentcolor if you prefer. I have not tested it thoroughly though.

Collapse
 
vuild profile image
Vuild

Thanks, I'll add the same technique to my site as well shortly & test it. I like the split svg thing.

Thanks to Lea too (so many times).