Should icon components use fixed color or currentColor?

For design-system icons, currentColor is usually best because color can be controlled from parent text or theme tokens.

How do I type icon props?

Use React.SVGProps as a base and add optional custom props only when needed.

Can I keep accessibility labels flexible?

Yes. Expose title/aria-label props and default to aria-hidden for decorative icons.

Should I optimize before React conversion?

Yes. Optimizing first reduces noise and avoids carrying unnecessary attributes into TSX files.

Crie componentes React tipados a partir de SVG

Transforme SVG bruto em ícones TSX reutilizáveis e mantenha cor, tamanho e acessibilidade consistentes.

Colar SVG diretamente no código costuma gerar props inconsistentes e valores fixos demais. Este guia propõe um fluxo limpo de React + TypeScript para ícones.

1) Normalize o SVG de entrada

Remova grupos desnecessários, metadados e estilos embutidos antes da conversão.
Preserve o viewBox para que o redimensionamento do componente continue previsível.
Renomeie IDs e masks para evitar colisões quando vários ícones aparecerem na mesma página.

2) Gere um componente com segurança de tipos

Use props TypeScript que estendem props SVG para ter suporte completo a IntelliSense.
Defina width/height padrão e permita sobrescrita a partir do componente pai.
Troque fills fixos por currentColor quando os ícones precisarem herdar a cor do texto.

3) Integre ao design system

Guarde os ícones em uma pasta previsível e exporte tudo a partir de um único arquivo de saída.
Aplique regras de lint ou testes para bloquear atributos SVG inválidos no CI.
Documente exemplos de uso para tamanhos semânticos e rótulos `aria`.

Mais guias SVG

Converter SVG em PNG com fundo transparente

Prepare arquivos de design para documentação e exportação.

Otimizar SVG para desempenho web

Reduza o peso do SVG antes de publicar componentes no produto.

FAQ sobre SVG para React TypeScript

Os componentes de ícone devem usar cor fixa ou currentColor?

Para ícones de sistemas de design, currentColor costuma ser melhor, porque a cor pode ser controlada pelo texto pai ou pelos tokens do tema.

Como devo tipar as props do ícone?

Use React.SVGProps<SVGSVGElement> como base e só adicione props customizadas opcionais quando realmente precisar.

Posso manter os rótulos de acessibilidade flexíveis?

Sim. Exponha props como title/aria-label e deixe aria-hidden como padrão para ícones meramente decorativos.

Devo otimizar antes da conversão para React?

Sim. Otimizar antes reduz ruído e evita carregar atributos desnecessários para os arquivos TSX.

Ferramentas usadas neste fluxo

Limpe, otimize e depois gere saída TSX pronta para produção.