¿Odias los anuncios? Ir Sin publicidad Hoy 

Convertidor de SVG a componente de React JSX

DesarrolladorTexto

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Conversor de SVG a componente JSX de React

Convertidor de SVG a componente de React JSX

Pegar el marcado raw de SVG y obtener un componente funcional de React limpio de vuelta. La herramienta aplica una conversión determinística a camelCase para cada atributo, elimina sintaxis no JSX y envuelve el resultado en un componente listo para importar — opcionalmente tipado, opcionalmente forwardRef-envuelto y opcionalmente redimensionado mediante propiedades. Todo funciona localmente en tu navegador, así que tus iconos y logotipos nunca abandonan tu máquina.

Cómo Usar

Pegar el completo <svg>…</svg> marcado en la caja de entrada.
Establecer un nombre de componente (PascalCase, como ArrowRightIcon).
Alternar TypeScript, forwardRef, propiedades de tamaño escalable y la propagación de propiedades para adaptarse a tu proyecto.
Copiar el JSX generado o descargarlo como un .tsx / .jsx archivo.

Características

atributo camelCase – stroke-width se convierte en strokeWidth, fill-rule se convierte en fillRule, y así sucesivamente a través de toda la especificación de SVG.
Manejo de palabras reservadas – class se reescribe a className, for a htmlFory xlink:href a xlinkHref.
Analizador de estilo inline – style="color: red; font-size: 12px" se convierte en un objeto de estilo JSX con claves en camelCase.
Salida en TypeScript – genera React.SVGProps<SVGSVGElement> tipos cuando está habilitado.
Modo de icono escalable – reemplaza las dimensiones fijas de ancho/altura por width y height propiedades con valores predeterminados razonables.
Envoltura de React.forwardRef – emite un React.forwardRef componente con un displayName para DevTools.
Propagación de propiedades – transmite propiedades arbitrarias al elemento raíz <svg> así que los consumidores pueden establecer className, ARIA o manejadores de eventos.
Diseñado para funcionar offline – el SVG nunca abandona el navegador; no hay subidas, no hay tránsitos hacia el servidor.

 Preguntas frecuentes

¿Por qué React y JSX reescriben los nombres de atributos de SVG?

JSX se compila directamente a acceso de propiedades de objetos en JavaScript, y los identificadores de JavaScript no pueden contener guiones. Por lo tanto, React se está alineando con camelCase para los nombres de propiedades que coinciden con el DOM IDL — por ejemplo, stroke-width se convierte en strokeWidth porque el DOM lo expone como element.strokeWidth. Una pequeña cantidad de atributos (class, for) colisionan con palabras reservadas en JavaScript y se renombran (className, htmlFor) para evitar conflictos de análisis.
¿Qué hace React.forwardRef para un componente de SVG?

Por defecto, un componente funcional no puede recibir un ref de su padre — React lo ignora silenciosamente. React.forwardRef expose el nodo DOM subyacente al padre, lo cual es esencial cuando necesitas acceso directo al elemento renderizado <svg> para gestión de enfoque, medición o integración con bibliotecas de animación como Framer Motion o GSAP.
¿Por qué se deben incorporar SVGs como componentes de React en lugar de como imágenes inline?

Incorporar SVG como JSX te da control completo sobre el árbol del DOM: puedes personalizar trazos y rellenos mediante variables CSS, animar rutas individuales, cambiar colores en tiempo real y eliminar iconos no utilizados en el momento de compilación. Un <img src="icon.svg"> se comporta como un elemento raster opaco — no puedes estilizar sus interiores desde la página anfitrión.
¿Por qué mantener ancho y alto como propiedades en lugar de atributos fijos?

Las dimensiones fijas en píxeles fijan el tamaño del icono en un solo tamaño y lo hacen difícil de integrar en un diseño. Exponer width y height como propiedades (a menudo acompañado del original viewBox) permite a los consumidores renderizar el mismo componente en 16px en una barra de herramientas y en 48px en un banner principal, con la escala vectorial del SVG preservando la claridad en todos los tamaños.