Convertir un SVG en componente React
Pegue un SVG y obtenga un componente React (.tsx) listo para usar, con todos los atributos convertidos a camelCase (className, strokeWidth...) y una prop props propagada.
¿Qué hace exactamente esta conversión?
JSX (el que usa React) no admite atributos HTML/SVG en kebab-case como stroke-width o class: deben escribirse en camelCase (strokeWidth, className). Esta herramienta reescribe automáticamente todos los atributos del SVG según esta convención y envuelve el resultado en una función componente de TypeScript, lista para copiar en un proyecto React.
¿Acepta el componente generado props personalizadas (color, tamaño)?
Sí, el componente propaga todas las props recibidas ({...props}) directamente a la etiqueta <svg>: por tanto, puede pasar className, width, height, onClick, etc. desde el componente padre como en cualquier elemento SVG.
¿Funciona el componente también en JavaScript puro (sin TypeScript)?
El archivo generado está en TypeScript (con tipado de props), pero basta con quitar la línea de importación de tipos y la anotación : SVGProps<SVGSVGElement> para usarlo directamente en un proyecto JavaScript clásico.
Procesamiento 100% local: la generación del componente se realiza íntegramente en su navegador; su SVG nunca se envía a un servidor.