Qué hace este convertidor de SVG
Los SVG exportados desde Figma, Illustrator, Sketch o Inkscape son XML válido, pero no JSX válido. React espera props en camelCase como strokeWidth en lugar de stroke-width, className en lugar de class y un objeto de estilos en vez de una cadena CSS. Además, los editores añaden declaraciones XML, comentarios, bloques de metadatos y atributos con espacios de nombres que inflan el bundle y provocan advertencias.
SvgJsx analiza el SVG con un pequeño parser XML, reescribe cada atributo en la forma que espera tu framework y genera un componente bien formateado. Puedes elegir tipos de TypeScript, una prop size, rellenos con currentColor, forwardRef, memo y el estilo de exportación, y después copiar el código o descargar el archivo.
Cómo convertir un SVG en un componente de React
El proceso lleva unos segundos:
- Pega el código SVG en el cuadro de entrada o suelta uno o varios archivos .svg sobre él.
- Elige el formato de salida: React, React Native, Vue, Solid o un fragmento JSX simple.
- Define el nombre del componente y opciones como TypeScript, currentColor y la prop size.
- Revisa la vista previa y la comparación de tamaño, y copia el código o descarga el archivo. Si conviertes varios archivos, se agrupan en un ZIP.
Conversiones automáticas
Los atributos con guiones pasan a camelCase (stroke-linecap → strokeLinecap), los atributos con espacio de nombres se aplanan (xlink:href → xlinkHref) y las cadenas de estilo en línea se convierten en objetos de JavaScript. Los atributos data-* y aria-* se conservan tal cual porque React los acepta así. Los elementos script y los manejadores de eventos en línea se eliminan para que un archivo pegado nunca pueda colar código en tu aplicación.
Una optimización ligera compacta los espacios en blanco y puede redondear las coordenadas a un número fijo de decimales. En la mayoría de los sets de iconos reduce entre un 20 y un 40 % del marcado sin depender del pesado SVGO.