Convertidor de SVG a Componente React
Pega o sube cualquier SVG y obtén un componente React limpio, con atributos en camelCase, un spread de props en la raíz y una firma TypeScript opcional. Gratis, privado e instantáneo.
Arrastra tu SVG aquí o haz clic para subir
Acepta archivos .svg, o pega el código SVG abajo
Por qué convertir SVG a React aquí
JSX limpio en camelCase
Cada atributo SVG se renombra para React: class pasa a ser className, stroke-width pasa a ser strokeWidth y clip-path pasa a ser clipPath, de modo que el componente compila sin advertencias.
Estilos inline como objetos
Un atributo style como fill:red;stroke-width:2 se convierte en un objeto style de React correcto, con claves en camelCase y prefijos de proveedor en mayúscula, en lugar de una cadena que React rechazaría.
Spread de props en la raíz
El SVG raíz recibe un spread con {...props} tras sus propios atributos, de modo que quien use tu componente puede pasar className, width, height u onClick y sobrescribir los valores por defecto.
TypeScript o JavaScript
Activa un interruptor para emitir un componente tipado con React.SVGProps<SVGSVGElement>, o mantenlo en JavaScript plano. Ponle al componente el nombre que quieras.
Atributos con espacio de nombres corregidos
xlink:href pasa a ser xlinkHref y xml:space pasa a ser xmlSpace, mientras que los atributos data-* y aria-* se dejan intactos, para que los degradados, máscaras y accesibilidad sigan funcionando.
100% privado y gratuito
La conversión se ejecuta íntegramente en tu navegador usando el parser integrado. Tu SVG nunca se sube, no hay registro y no hay límites.
Cómo convertir SVG a componente React
Añade tu SVG
Arrastra y suelta un archivo .svg, haz clic para buscarlo, o pega tu código SVG en el cuadro.
Configura las opciones
Ponle nombre a tu componente, activa TypeScript si quieres una firma tipada, y elige si hacer spread de props en el SVG raíz.
Obtén JSX limpio
El convertidor renombra class a className, aplica camelCase a todos los atributos, convierte los estilos inline en un objeto style y corrige atributos con espacio de nombres como xlink:href.
Copia y pega
Pulsa copiar y añade el componente directamente a tu proyecto React, Next.js o TypeScript. Sin pasos de compilación, sin dependencias.
Elige la herramienta correcta
Por qué existe esta página
Use the SVG to React converter when you need a vector as a real component, not a static asset. It camelCases every attribute, turns inline styles into a style object, spreads props on the root, and can emit TypeScript.
Mejor para
- Turning Figma, Illustrator, or Inkscape icons into JSX components
- Building an icon set where each SVG accepts className, size, and color props
- Inlining a logo as a component instead of an img tag or background
Herramientas relacionadas que suelen necesitarse después
Preguntas frecuentes: SVG a React
Pega tu código SVG o sube un archivo .svg, y la herramienta devuelve un componente React listo para usar. Renombra los atributos a camelCase, convierte los estilos inline en un objeto style, hace spread de props en la raíz, y te permite establecer el nombre del componente y activar TypeScript. Copia la salida en tu proyecto e impórtalo como cualquier otro componente.
JSX no es HTML. React espera className en lugar de class, atributos en camelCase como strokeWidth en lugar de stroke-width, y un objeto style en lugar de una cadena de estilo. Un SVG en bruto pegado en JSX normalmente lanza errores o no renderiza nada, que es exactamente lo que este convertidor soluciona.
Sí. Activa el interruptor TypeScript y el componente se tipa con props: React.SVGProps<SVGSVGElement> e incluye la importación de React, listo para añadirlo a un archivo .tsx. Desactívalo para obtener salida en JavaScript plano.
Con el spread activado, el SVG raíz termina con {...props}, colocado después de sus propios atributos. Eso permite a cualquier usuario de tu componente pasar className, width, height, fill o manejadores de eventos y sobrescribir los valores por defecto, que es como funcionan la mayoría de las bibliotecas de iconos.
No. La conversión ocurre íntegramente en tu navegador usando el parser SVG nativo. No se envía nada a ningún sitio, por lo que es seguro usarlo con recursos de marca privados e iconos propietarios.
Convertidor de SVG a Componente React
Pega o sube cualquier SVG y obtén un componente React limpio, con atributos en camelCase, un spread de props en la raíz y una firma TypeScript opcional. Gratis, privado e instantáneo.