Converter um SVG em componente React (JSX)
Transforme um SVG em um componente React/JSX pronto para usar (atributos camelCase, nome personalizado).
The SVG receives {...props}: you can pass className, width, style, etc. Attributes are converted to camelCase for React.
🔒 100 % no cliente — nenhum dado enviado
Transforme qualquer SVG em um componente React reutilizável: os atributos passam para camelCase (stroke-width → strokeWidth), o nome do componente é personalizável e {...props} é adicionado. Tudo é gerado localmente.
What is it for?
- ▸ Criar um componente de ícone React a partir de um SVG
- ▸ Integrar um pictograma em uma biblioteca de componentes
- ▸ Tornar um SVG estilizável via props (className, cor)
- ▸ Converter um lote de ícones exportados
FAQ
Por que adicionar {...props}?
Para poder passar className, width, height, style ou manipuladores de eventos ao SVG de fora do componente.
Tags como linearGradient são preservadas?
Sim, a capitalização dos elementos SVG (linearGradient, clipPath…) é preservada como o React exige.
Posso mudar a cor depois?
Sim, se o SVG usa currentColor, a cor segue a propriedade CSS color do componente pai.
É compatível com TypeScript?
A saída é JSX simples; para TypeScript, adicione um tipo de props como (props: React.SVGProps<SVGSVGElement>).