Converter SVG em componente React
Cole um SVG e obtenha um componente React (.tsx) pronto para uso, com todos os atributos convertidos para camelCase (className, strokeWidth...) e uma prop props repassada.
O que exatamente esta conversão faz?
O JSX (usado pelo React) não aceita atributos HTML/SVG em kebab-case como stroke-width ou class: eles precisam ser escritos em camelCase (strokeWidth, className). Esta ferramenta reescreve automaticamente todos os atributos do SVG seguindo essa convenção e envolve o resultado em uma função de componente TypeScript, pronta para ser copiada em um projeto React.
O componente gerado aceita props personalizadas (cor, tamanho)?
Sim, o componente repassa todas as props recebidas ({...props}) diretamente para a tag <svg>: assim, você pode passar className, width, height, onClick etc. a partir do componente pai, como em qualquer elemento SVG.
O componente também funciona em JavaScript puro (sem TypeScript)?
O arquivo gerado é em TypeScript (com tipagem das props), mas basta remover a linha de importação de tipo e a anotação : SVGProps<SVGSVGElement> para usá-lo diretamente em um projeto JavaScript convencional.
Processamento 100% local: a geração do componente é feita inteiramente no seu navegador, e seu SVG nunca é enviado a um servidor.