SVGs e cor de preenchimento #
Então, digamos que você tenha um ícone SVG cuja cor corresponda ao 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 fillou strokeem seu SVG, o padrão é #000000, ou preto.
A cor do texto atual no meu site é carvão escuro #272727,. Se eu quisesse meu ícone SVG para coincidir com isso, eu poderia atribuir-lhe uma fillcor 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>Cores SVG dinâmicas #
Essa abordagem funciona bem, mas … e se eu quisesse incluir meu ícone SVG em um link?
Meus links têm uma cor de #0088cc. Vamos atualizar a fillcor para combinar.
<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>
This link doesn't do anything
</a>Agora, a cor SVG corresponde ao link … exceto quando você passa o mouse. Então, está muito claro.
É aqui que a currentColorpropriedade brilha. Podemos usá-lo como nosso fillvalor, e o SVG pegará 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>
This link doesn't do anything
</a>Eu amo esse truque e uso-o constantemente.
Quando você não gostaria de fazer isso #
A única vez que não uso currentColorpara o meu SVG fillé 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 de meus produtos ), uso uma fillcor codificada .