Convertidor SVG a JSX/React

Convierte SVG en componentes React JSX en línea. Transforma atributos SVG a camelCase, envuelve como componente React. Gratis e instantáneo.

Component:

Wrap as Component

SVG

JSX / React

Sobre la conversión de SVG a JSX

Usar iconos y gráficos SVG en React requiere convertir atributos SVG a sintaxis compatible con JSX. Esta herramienta maneja automáticamente todas las transformaciones y puede envolver el SVG en un componente React con declaración de export.

𝕏 Twitter in LinkedIn

Califica esta herramienta

4.8 / 5 · 55 calificaciones

Más herramientas

JSXHTML a JSX TWCSS a Tailwind 🖼️Convertidor Imagen Base64 JSFormateador JS/HTML

Mantente actualizado

Recibe consejos de desarrollo y nuevas herramientas.

Sin spam. Cancela cuando quieras.

Enjoy these free tools?

☕Buy Me a Coffee

Cómo usar

Pega tu marcado SVG en el panel de entrada
Establece el nombre del componente y activa opciones de envoltura
Haz clic en Convertir para generar SVG compatible con JSX
Copia el resultado en tu archivo de componente React

Casos de uso comunes

Convertir iconos SVG de Figma o Illustrator en componentes React
Construir una biblioteca de iconos con componentes React SVG reutilizables
Migrar assets SVG de HTML estático a React
Optimizar SVGs inline para renderizado React

Preguntas frecuentes

¿Qué atributos SVG se convierten?

Todos los atributos SVG en kebab-case se convierten a camelCase: stroke-width → strokeWidth, fill-opacity → fillOpacity, etc.

¿Se puede envolver el SVG como componente React?

Sí. Activa la opción 'Envolver como componente' para generar un componente React completo con export.

¿Por qué eliminar xmlns en React?

El atributo xmlns solo es necesario para archivos SVG independientes. En JSX/React no es necesario.

¿Maneja estilos inline?

Sí. Las cadenas de estilo inline se convierten en objetos style JavaScript con propiedades en camelCase.