Pular para o conteúdo
SvgJsx
Idioma: Português

Faça seus ícones SVG usarem currentColor

Troque as cores fixas de fill e stroke por currentColor para que seus ícones herdem a cor do texto do elemento pai, mudem no hover e se adaptem ao modo escuro automaticamente.

Predefinições:
Solte arquivos .svg aqui ouOs arquivos são lidos localmente com FileReader e nunca são enviados.
Opções
Exportação:
import type { SVGProps } from "react";

const HeartIcon = ({ size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: number | string }) => (
  <svg viewBox="0 0 24 24" className="icon icon-heart" width={size} height={size} {...props}>
    <g id="Layer_1" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "currentColor" }} />
    </g>
  </svg>
);

export default HeartIcon;

Pré-visualização

Pré-visualização do SVG convertido
SVG original
706 B
SVG otimizado
548 B(-22%)
Componente
692 B

O que o currentColor faz

currentColor é uma palavra-chave CSS que corresponde ao valor calculado da propriedade color do elemento. Quando um SVG usa fill="currentColor", o ícone é pintado com a cor aplicada ao seu pai, venha ela de uma classe do Tailwind, do estado de hover de um link ou de uma media query de modo escuro.

Ferramentas de design exportam ícones com valores hexadecimais fixos, como fill="#111827". Isso prende o ícone a uma única cor e obriga você a manter arquivos diferentes para cada tema. Ao converter para currentColor, um único arquivo serve em qualquer contexto.

O que o conversor altera

Com a opção currentColor ativada:

  • Atributos fill e stroke com valor de cor viram currentColor.
  • fill e stroke dentro de atributos style inline também são trocados.
  • none, transparent, inherit e referências url(#gradiente) são mantidos, então contornos e gradientes continuam funcionando.
  • Outras cores, como stop-color em gradientes, não são alteradas.

Quando não usar currentColor

Ilustrações multicoloridas, logos de marca e bandeiras dependem de várias cores específicas. Trocar todas por uma só deixa a arte chapada. Nesses arquivos, mantenha as cores originais ou use propriedades personalizadas do CSS para as poucas cores que devem mudar com o tema.

Perguntas frequentes

Por que meu ícone ficou preto depois da conversão?

currentColor herda a propriedade CSS color. Se o pai não tiver cor definida, os navegadores usam preto por padrão. Defina color no ícone ou em um elemento pai, por exemplo class="text-blue-600".

currentColor funciona com contornos?

Sim. Tanto fill quanto stroke aceitam currentColor; é por isso que conjuntos de ícones de contorno como Lucide e Heroicons usam stroke="currentColor".

Posso usar currentColor em uma tag <img>?

Não. Um SVG carregado via <img> ou background-image do CSS fica isolado do CSS da página, e currentColor vira preto. O SVG precisa estar inline, que é exatamente o que um componente oferece.

Os gradientes continuam funcionando?

Sim. Preenchimentos que fazem referência a um gradiente com url(#id) não são alterados, e os ids referenciados são preservados mesmo com a remoção de ids ativada.