The secret that the fonts industry doesn't want you to know
#css#discuss
Rémy 🤖

Rémy 🤖 @xowap

About: I spent my adolescence in Dreamweaver, my student years in Vim and my adult life in PyCharm.

Location:
Madrid
Joined:
Feb 16, 2017

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

Publish Date: May 4 '19
279 17

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 that Lea Verou was the first person to ever use and expose it to the world.

While CSS variables are fucking awesome, it's 1. not always possible to use them yet (oh sweet IE 11) and 2. not always necessary.

Let's go for an example. Remember how everybody loves icon fonts because they automatically get the color of the font? Turns out you can do the same thing with SVG with a greater control.

Well suppose your code looks like this:

<nav class="menu">
    <a class="item">
        <svg><path d="..."/></svg>
        JavaScript
    </a>
    <a class="item">
        <svg><path d="..."/></svg>
        Python
    </a>
    <a class="item">
        <svg><path d="..."/></svg>
        Sass
    </a>
</nav>
Enter fullscreen mode Exit fullscreen mode

You want the SVG icon in front of the text to change with the text's color. What do you do?

<svg><path d="..."/></svg>
Enter fullscreen mode Exit fullscreen mode

Becomes

<svg><path fill="currentColor" d="..."/></svg>
Enter fullscreen mode Exit fullscreen mode

And that's it, your SVG has the color of the text no matter what. Here's a live example, don't forget to hover the buttons!

Have you noticed how the Python logo doesn't change color completely on hover? You don't have to put the currentColor to every path in the SVG. Much more freedom than with fonts!

It's a simple trick but I really used it a lot recently. What about you, what patterns can you think of with currentColor?

Comments 17 total

  • Ryan Palo
    Ryan PaloMay 4, 2019

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

  • Vuild
    VuildMay 4, 2019

    Excellent explanation & example. Is the camelCase essential?

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

    • Rémy 🤖
      Rémy 🤖May 4, 2019

      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.

      • Vuild
        VuildMay 4, 2019

        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).

  • Josh Pullen
    Josh PullenMay 5, 2019

    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. 😀

  • Ben Sinclair
    Ben SinclairMay 5, 2019

    This is neat. Upvoted despite the title.

    • Rémy 🤖
      Rémy 🤖May 5, 2019

      Hahaha sorry :)

    • Erick Navarro
      Erick NavarroMay 6, 2019

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

    • Paul Beffa
      Paul BeffaJan 23, 2020

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

  • Mikhail Panichev
    Mikhail PanichevMay 6, 2019

    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.

    • Rémy 🤖
      Rémy 🤖May 6, 2019

      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.

      • Mikhail Panichev
        Mikhail PanichevMay 7, 2019

        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;
  }
}
  • Alex Lohr
    Alex LohrMay 6, 2019

    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.

    • Rémy 🤖
      Rémy 🤖May 6, 2019

      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!

      • Alex Lohr
        Alex LohrMay 6, 2019

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

  • cvanpoelje
    cvanpoeljeJul 19, 2019

    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?

  • Agustin Mouratoglou
    Agustin MouratoglouJan 23, 2020

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

Add comment