SVG a componente React
Pega código SVG y obtén un componente funcional de React listo para importar, con atributos en camelCase.
Cómo funciona
El SVG se analiza con el propio analizador DOM del navegador, así que se entiende
realmente como marcado, no solo se compara con patrones de texto. Cada nombre de atributo
se convierte a su equivalente React/DOM usando el mismo mapeo que React usa internamente
(stroke-width → strokeWidth, class →
className, xlink:href → xlinkHref, y así
sucesivamente), el árbol se vuelve a serializar como JSX, y se envuelve en un pequeño
componente funcional. Con "Aceptar props" activado, {...props} se reparte en
el elemento raíz para que quien lo use pueda pasar width,
className o un manejador onClick a la manera habitual de React.
El análisis y la conversión ocurren por completo en el JavaScript de esta página, sobre el DOM que el navegador construye a partir de tu entrada. No se sube nada.
Preguntas frecuentes
¿Qué cambia entre el SVG y el JSX?
Los nombres de atributo pasan a camelCase (stroke-width se convierte en strokeWidth, fill-rule en fillRule), class se convierte en className, y las etiquetas autocerradas reciben la barra final que exige JSX. El resultado visual es idéntico.
¿Puedo controlar el tamaño y el color desde props?
Activa "Aceptar props" para que el componente reparta {...props} en el elemento raíz <svg>, así puedes sobrescribir width, height, className o cualquier otra cosa desde donde lo uses, el patrón estándar para componentes de icono.
¿Esto envía mi SVG a algún sitio?
No. La conversión es una simple transformación de cadenas y atributos hecha en tu navegador. No se sube nada.