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
Top comments (0)