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
class→className
for→htmlFor
stroke-width→strokeWidth
fill-rule→fillRule
clip-path→clipPath
style="..."→style={{ ... }}
Colar SVG bruto em um projeto React causa erros porque atributos HTML como class e stroke-width são inválidos em JSX. Esta ferramenta converte seu SVG instantaneamente: renomeia atributos HTML para equivalentes JSX (class→className), converte props kebab-case para camelCase (stroke-width→strokeWidth, fill-rule→fillRule), reescreve estilos inline como objetos JS e encapsula tudo em um componente funcional — com tipos TypeScript opcionais e espalhamento de props.
Como Usar
- 1Cole seu SVG no painel esquerdo (ou clique em 'Carregar exemplo')
- 2Defina o nome do componente (padrão: MyIcon)
- 3Ative TypeScript para obter um componente pronto para .tsx
- 4Ative 'Espalhar props' para encaminhar atributos SVG extras em tempo de execução
- 5Copie o componente gerado com um clique
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.