SVG para Componente React
Converta marcação SVG em um componente React pronto para uso. Transforma class→className, props kebab-case→camelCase e estilos inline automaticamente.
Entrada SVG
Componente React
O que é convertido
Perguntas frequentes
Por que não posso usar SVG bruto no React?
JSX não é HTML. O React usa camelCase para atributos DOM (className em vez de class, htmlFor em vez de for) e exige que props de estilo sejam objetos JavaScript, não strings CSS. O SVG adiciona ainda mais atributos kebab-case como stroke-width e fill-rule que também precisam ser convertidos.
Há suporte a TypeScript?
Sim. Ative o toggle TypeScript para obter um componente tipado com React.SVGProps<SVGSVGElement>, que é o tipo correto para encaminhar props ao elemento raiz SVG.
O que 'Espalhar props' faz?
Quando ativado, o componente gerado aceita props extras (como className, onClick ou aria-label) e as espalha no elemento <svg>. Isso permite que consumidores personalizem o ícone sem precisar copiar o componente.
Atributos xmlns são removidos?
Sim. O React não precisa de atributos xmlns, xmlns:xlink ou version — eles são adicionados automaticamente pelo navegador e geram ruído no JSX, por isso esta ferramenta os remove.