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), usa className en lugar de class y necesita el atributo style como un objeto de propiedades en camelCase y no como cadena: esta herramienta lo corrige todo automáticamente. Desarrolladores front-end y diseñadores la usan al exportar iconos desde Figma, Illustrator o un set de iconos. Activa la limpieza opcional para quitar comentarios, metadatos de editor y declaraciones XML, y elige si la salida es JSX en línea o un componente de función, memo() o forwardRef tipado con React.SVGProps.

Cómo usar Conversor de SVG a JSX

1. Pega tu marcado SVG en el cuadro de entrada o suelta un archivo .svg en la zona de arrastre.
2. Lee el JSX convertido en el cuadro de salida: los atributos quedan en camelCase, class pasa a className, un style en línea se vuelve objeto style y las etiquetas vacías se autocierran.
3. Abre Ajustes y elige una Salida de componente: JSX en línea, un componente de función, un componente memo() o un componente forwardRef.
4. Establece el campo Nombre del componente para controlar el nombre usado en el envoltorio (por ejemplo MyIcon).
5. Activa Props de TypeScript para tipar el componente con React.SVGProps, o activa Limpiar SVG para quitar antes comentarios y metadatos del editor.
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" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

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

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...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, xlink:href a xlinkHref), convierte class en className, reescribe una cadena style en línea como objeto style de JSX con claves en camelCase y autocierra los elementos vacíos como path y rect para que sean JSX válido.

¿Cómo funcionan las opciones de salida de componente?

Elige JSX en línea para colocar el marcado en cualquier parte, o envuélvelo como componente de función, memo() o forwardRef con el Nombre del componente que indiques. Un componente forwardRef recibe una ref que se adjunta al svg raíz. Activa Props de TypeScript para tipar cualquier envoltorio con React.SVGProps y desplegar {...props}.

¿Convierte los estilos en línea?

Sí. Un atributo style="fill:red;stroke-width:2" se reescribe como un objeto style de JSX como style={{ fill: "red", strokeWidth: "2" }}, con los nombres de propiedad en camelCase y los valores como cadenas. Las propiedades CSS personalizadas (--var) se conservan como claves de cadena.

¿Qué hace la limpieza estilo SVGO?

Cuando Limpiar SVG está activo, la herramienta quita declaraciones XML, DOCTYPE, comentarios, <metadata>, espacios de nombres de editor como inkscape: y sodipodi:, y el atributo version del svg, y luego colapsa los espacios en blanco, todo antes de ejecutar la conversión a JSX.

¿Se sube mi SVG a algún sitio?

No. Soltar un archivo o pegar marcado ejecuta una transformación pura de cadenas por completo en tu navegador, así que tu SVG nunca se envía a un servidor y la herramienta funciona sin conexión.