Conversor de SVG a JSX

¿Qué es Conversor de SVG a JSX?

El Conversor de SVG a JSX es una herramienta gratuita en el navegador que convierte marcado SVG normal en JSX de React válido que puedes pegar directamente en un componente. React espera los atributos del DOM en camelCase (strokeWidth, clipPath, fillRule) y usa className en lugar de class, por lo que el SVG pegado a mano suele generar advertencias hasta que se limpia: esta herramienta lo hace automáticamente. Desarrolladores front-end y diseñadores la usan al exportar iconos desde Figma, Illustrator o un set de iconos y convertirlos en componentes React reutilizables. Activa 'Envolver en componente' para emitir un componente de función con nombre, y 'Props de TypeScript' para tiparlo con React.SVGProps de modo que reenvíe width, height, className y los manejadores de eventos.

Cómo usar Conversor de SVG a JSX

1. Pega o escribe tu marcado SVG en el cuadro de entrada SVG situado arriba.
2. Lee el JSX convertido en el cuadro de salida de abajo: los atributos quedan en camelCase, class pasa a className y las etiquetas vacías se autocierran automáticamente.
3. Abre Ajustes y activa 'Envolver en componente' para emitir un componente de función React reutilizable en lugar de JSX suelto.
4. Establece el campo Nombre del componente para controlar el nombre usado en el envoltorio (por ejemplo MyIcon).
5. Activa 'Props de TypeScript' para desplegar React.SVGProps tipado y que el componente acepte width, className y otras props.
6. Haz clic en Copiar para copiar el JSX y luego pégalo en tu proyecto React o Next.js.

Ejemplos

<svg viewBox="0 0 24 24"><path stroke-width="2" class="icon" d="M4 12h16"></path></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" className="icon" d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>

export function MyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
}

Preguntas frecuentes

¿Qué cambia el conversor en mi SVG?

Renombra los atributos con guiones y con espacio de nombres a la forma camelCase de React (stroke-width a strokeWidth, fill-rule a fillRule, xlink:href a xlinkHref), convierte el atributo class en className y autocierra los elementos vacíos como path y rect para que sean JSX válido.

¿Cómo funcionan las opciones de componente y TypeScript?

Con 'Envolver en componente' desactivado obtienes JSX en línea que puedes colocar en cualquier parte. Actívalo para envolver el SVG en un componente de función con el Nombre del componente que indiques. Al activar 'Props de TypeScript' se tipa ese componente con React.SVGProps y se despliega {...props} para que reenvíe width, height, className y los manejadores de eventos.

¿Maneja los estilos en línea?

Los atributos normales se convierten, pero un atributo style de cadena no se reescribe como objeto style de JSX: React espera style como un objeto de propiedades en camelCase, así que revisa cualquier style en línea tras pegar. La herramienta se centra en los nombres de atributo, el autocierre y el envoltorio opcional de componente.

¿Qué pasa si mi SVG no es válido?

Si la entrada no puede analizarse como SVG o XML, se muestra un mensaje de error en lugar de la salida. Asegúrate de que el marcado tenga un único elemento raíz y etiquetas equilibradas; entonces el JSX vuelve a aparecer mientras escribes.

¿Se sube mi SVG a algún sitio?

No. La conversión es una transformación pura de cadenas que se ejecuta por completo en tu navegador, por lo que tu marcado SVG nunca se envía a un servidor y la herramienta funciona sin conexión.