Crie componentes React tipados a partir de SVG

Transforme o 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. Este guia apresenta um fluxo limpo de ícones em React + TypeScript.

1) Normalize a entrada SVG

Limpe grupos, metadados e estilos inline desnecessários antes da conversão.
Preserve o viewBox para que a escala dos componentes continue previsível.
Renomeie IDs e máscaras para evitar colisões quando vários ícones aparecem na mesma página.

2) Gere um componente type-safe

Use props TypeScript que estendem props SVG para suporte completo ao IntelliSense.
Defina largura/altura padrão e permita sobrescrever a partir do uso no componente pai.
Substitua preenchimentos fixos por currentColor quando os ícones devem herdar a cor do texto.

3) Integre a um design system

Guarde os ícones em uma pasta previsível e exporte de um único arquivo barrel.
Aplique regras de lint ou testes para bloquear atributos SVG inválidos no CI.
Documente exemplos de uso para tokens de tamanho semânticos e aria labels.

Mais guias de SVG

Converter SVG para PNG com fundo transparente (sem halo)

Prepare ativos de design para documentação e exportação de marketing.

Otimizar SVG para desempenho web

Reduza o payload do SVG antes de publicar componentes.

FAQ sobre SVG para React TypeScript

Componentes de ícone devem usar cor fixa ou currentColor?

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

Como tipar os props do ícone?

Use React.SVGProps<SVGSVGElement> como base e adicione props personalizadas opcionais somente quando necessário.

Posso manter rótulos de acessibilidade flexíveis?

Sim. Exponha props de title/aria-label e use aria-hidden por padrão para ícones decorativos.

Devo otimizar antes da conversão para React?

Sim. Otimizar primeiro reduz o ruído e evita levar atributos desnecessários para os arquivos TSX.

Ferramentas usadas neste fluxo

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