SVG Forge

SVG a componente de React

Pega un SVG y obtén un componente JSX o TSX listo para importar.

o suelta un archivo / pega código abajo
Componente de React
La salida aparece aquí

Cómo funciona

  1. 1Pega código SVG o suelta un archivo .svg.
  2. 2Activa la salida en TypeScript y pon el nombre del componente.
  3. 3Copia el componente generado a tu código.

Gratis, sin registro y sin marcas de agua: todo se ejecuta localmente en tu navegador, así que tus archivos nunca salen de tu equipo.

Preguntas frecuentes

¿Qué se convierte exactamente?

Los atributos pasan a camelCase (stroke-width → strokeWidth), class pasa a className y el resto de props se propagan a la raíz para que puedas pasar tamaño y color.

¿Debo optimizar el SVG antes?

Sí: pásalo primero por el optimizador de SVG para obtener un componente más pequeño y limpio. Las dos herramientas están a un clic.

Herramientas relacionadas

SVG a Vue

Convierte cualquier SVG en un componente de archivo único de Vue 3.

Optimizador de SVG

Limpieza con SVGO: archivos más pequeños, los mismos píxeles. El ahorro se ve al instante.

SVG a data URI

Codifica SVG para img src, url() de CSS o cualquier sitio donde quepa un URI.