CurrentColor e SVGs
Tags: html, svg, css, portugues
Published: 2023-12-03 19:24:01

_**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.

```html
<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:

```html
<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.

```html
<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>
```
![arvore-svg-com-texto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8qqfr7q9e48ydnnie0s.png)

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.

```html
<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`.

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

Saúde,

## Fonte

Newsletter de [Go Make Things](https://gomakethings.com/)