CurrentColor e SVGs

Nota: apenas traduzi o texto abaixo e postei aqui.

SVGs e fill color

Então, digamos que você tenha um ícone SVG cuja cor deseja combinar com o resto do texto. Por exemplo, aqui está um SVG de uma árvore.

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 17 17">
    <path d="M14.755 14.006l-2.536-3.381H13.283a.531.531 0 0 0 .41-.869l-2.536-3.381h1.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h4.781v1.594c0 .293.238.531.531.531h2.125a.531.531 0 0 0 .531-.531v-1.594h4.782a.531.531 0 0 0 .41-.869z"/>
</svg>

Se você não especificar um fill ou stroke em seu SVG, o default será #000000 ou black.

A cor do texto atual em meu site é dark charcoal, #272727. Se eu quisesse que meu ícone SVG correspondesse a isso, poderia atribuir a ele uma fill color no path:

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 17 17">
    <path fill="#272727" d="M14.755 14.006l-2.536-3.381H13.283a.531.531 0 0 0 .41-.869l-2.536-3.381h1.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h4.781v1.594c0 .293.238.531.531.531h2.125a.531.531 0 0 0 .531-.531v-1.594h4.782a.531.531 0 0 0 .41-.869z"/>
</svg>

SVG colors dinâmicas

Essa abordagem funciona bem, mas... e se eu quisesse incluir meu ícone SVG em um link?

Meus links têm a cor #0088cc. Vamos atualizar a fill color para corresponder.

<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 17 17">
        <path fill="#0088cc" d="M14.755 14.006l-2.536-3.381H13.283a.531.531 0 0 0 .41-.869l-2.536-3.381h1.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h4.781v1.594c0 .293.238.531.531.531h2.125a.531.531 0 0 0 .531-.531v-1.594h4.782a.531.531 0 0 0 .41-.869z"/>
    </svg>
    Esse link não faz nada
</a>

Agora a cor do SVG corresponde ao link... Exceto quando você passa o mouse ou clica e segura o clique do mouse sobre o link.

É aqui que a propriedade currentColor brilha. Podemos usá-la para nosso valor de fill, e o SVG selecionará qualquer que seja a cor atual do link.

<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 17 17">
        <path fill="currentColor" d="M14.755 14.006l-2.536-3.381H13.283a.531.531 0 0 0 .41-.869l-2.536-3.381h1.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h1.063l-2.55 3.4a.53.53 0 0 0 .425.85h4.781v1.594c0 .293.238.531.531.531h2.125a.531.531 0 0 0 .531-.531v-1.594h4.782a.531.531 0 0 0 .41-.869z"/>
    </svg>
    Esse link não faz nada
</a>

Eu amo esse truque e uso ele constantemente.

Quando você não gostaria de fazer isso

A única vez que não uso currentColor para meu o fill do SVG é quando o ícone deve ter uma cor específica e mantê-la independentemente do contexto.

Por exemplo, com logotipos ou gráficos com uma paleta de cores específica (como o logotipo do Slack nas páginas dos meus produtos), eu uso uma cor de fill hard-coded.

Truquezinho

Este pequeno snippet CSS definirá automaticamente o fill como currentColor para qualquer SVG caso esse não possua um atributo fill.

svg:not([fill]) {
    fill: currentColor;
}

Saúde,

Fonte

Newsletter de Go Make Things