Entendendo um pouco sobre currentColor e SVGs

Recebi muitos e-mails mencionando como essa propriedade CSS é incrível utilizando SVGs também.

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.

 Este link não faz nada

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

 Este link não faz nada

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Add Comment *

Name *

Email *

Website

Acelere seu site

Expanda seus negócios com tranquilidade com nossos poderosos servidores em nuvem.

error: Conteúdo protegido!
× Ajuda