SVG a React JSX

    Convierte código SVG en componentes React JSX listos para producción automáticamente. Corrige nombres de atributos y resuelve problemas de compatibilidad.

    Entrada SVG

    Arrastra y suelta o haz clic para subir el SVG

    o pega el código directamente

    Salida JSX

    Opciones de conversión

    Añadir definiciones de interfaces
    Envolver el componente con memo
    Utilizar comillas dobles en los atributos
    Eliminar atributos id innecesarios

    Permanece en tu dispositivo. Todo el procesamiento se realiza en tu navegador. Tus entradas nunca se suben a nuestros servidores.

    Cómo usar

    Sigue estos sencillos pasos para obtener los mejores resultados.

    1Pega el código SVG original aquí. Ya provenga de Figma, Illustrator o una librería de iconos, solo tienes que pegarlo o arrastrar el archivo.
    2Lo validaremos al instante. Si el marcado es correcto, verás el distintivo 'SVG válido'. De lo contrario, te avisaremos de cualquier anomalía.
    3Personaliza el resultado. Activa TypeScript para archivos .tsx, añade React.memo para optimizar el rendimiento o limpia identificadores repetidos.
    4Comprueba el JSX. Convertimos automáticamente los atributos con guiones a camelCase y envolvemos todo en un componente de React limpio y reutilizable.
    5Copia e integra en tu código. Lleva el componente a tu proyecto con un solo clic. Pulsa Restablecer si deseas convertir otro icono.

    Preguntas frecuentes

    Encuentra respuestas a preguntas comunes sobre esta herramienta.

    Porque el JSX de React se compila a JavaScript, no a HTML. En JavaScript los nombres de propiedades no pueden contener guiones (como `stroke-width`), la palabra `class` es una palabra clave reservada del lenguaje (requiriendo `className`) y los estilos en línea deben formularse como objetos en lugar de cadenas de texto.

    Transforma todos los atributos en kebab-case a camelCase (por ejemplo, `stroke-width` a `strokeWidth`), sustituye `class` por `className`, convierte estilos en línea a objetos JavaScript válidos, elimina espacios de nombres superfluos (`xmlns`) y limpia identificadores para evitar conflictos en el DOM.

    Añade las definiciones de tipos correspondientes (`React.SVGProps<SVGSVGElement>`) al componente generado, asegurando que tu editor proporcione autocompletado y validación de tipos estricta en proyectos TypeScript (.tsx).

    Envuelta en `React.memo()`, el icono evita renderizados innecesarios cuando el componente padre se actualiza pero las propiedades del icono no han cambiado, lo que resulta especialmente útil en listas largas con decenas de iconos.

    Los editores de diseño como Figma suelen asignar identificadores genéricos repetidos (como `id="a"` para degradados o máscaras). Si utilizas ese mismo icono varias veces en una misma página, los identificadores duplicados entrarán en conflicto y los degradados visuales se romperán.

    Es un componente estándar de React. Copia el código en un archivo nuevo (como MyIcon.tsx) e impórtalo donde lo requieras. Al propagar `{...props}` en el elemento raíz, puedes personalizarlo fácilmente: `<MyIcon width={24} fill="currentColor" className="my-icon" />`. Es limpio, reutilizable y funciona de inmediato.

    Sí. Si sustituyes los colores fijos en el SVG por `currentColor`, el icono adoptará automáticamente el color del texto (`color`) definido en el contenedor padre o en tus clases de utilidad CSS.

    ¿Cómo funciona?

    Comprende la metodología, fórmulas y conceptos detrás de esta herramienta.

    Convierte tus exportaciones de diseño en componentes de React listos para producción

    Los archivos vectoriales SVG son ideales para iconos y logotipos en la web, pero pegarlos directamente en una aplicación React suele provocar una catarata de advertencias en la consola y errores en el empaquetador. Nuestro conversor de SVG a React JSX transforma cualquier archivo SVG en un componente tipado, reutilizable y conforme a las mejores prácticas de React.

    Por qué los archivos SVG sin procesar rompen tu compilación de React

    El formato JSX de React no es HTML común: es una extensión sintáctica de JavaScript y sigue estrictamente las reglas del lenguaje. Intentar insertar un SVG sin adaptar genera múltiples problemas:

    • Kebab-case vs. camelCase: El estándar SVG utiliza guiones en decenas de propiedades (stroke-width, fill-rule, clip-path). En JavaScript los guiones se interpretan como operadores de resta, por lo que React exige nombres en camelCase como strokeWidth y fillRule.
    • El conflicto con class: En JavaScript, class es una palabra reservada para declarar clases. React exige emplear className.
    • Estilos en línea como objetos: Los atributos style="fill: blue" habituales en SVG provocan un error fatal en React, que exige una estructura de objeto: style={{ fill: 'blue' }}.
    • Espacios de nombres innecesarios: Atributos como xmlns y xmlns:xlink son útiles para documentos independientes, pero superfluos dentro de una aplicación web moderna.
    • Conflictos de IDs en degradados: Figma y Sketch exportan máscaras y degradados con identificadores cortos repetitivos (id="paint0_linear"). Si un icono se repite en una pantalla, los IDs colisionan y los degradados desaparecen.

    El resultado: un componente limpio, moderno y tipado

    Nuestra herramienta genera un componente modular e intuitivo:

    JSX
    import React from "react"; const SvgIcon = React.memo( (props: React.SVGProps<SVGSVGElement>) => ( <svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300" {...props} > <rect width="100%" height="100%" fill="#f8f8f8" /> <path fill="#31343C" d="M112.215 126.065v34.4h-8.38..." /> </svg> ) ); export default SvgIcon;

    La inclusión de {...props} te permite modificar el tamaño, color o clases del icono desde cualquier componente contenedor sin tocar el código SVG subyacente.

    Consejo profesional: diseña un sistema de iconos escalable

    1. Convierte tus iconos con las casillas de TypeScript y React Memo activadas.
    2. Guarda cada icono en su propio archivo dentro de una carpeta components/icons/.
    3. Sustituye los colores fijos por "currentColor".
    4. Expórtalos de forma centralizada desde un archivo index.ts.

    Al usar fill="currentColor", los iconos heredan directamente el color del texto mediante clases de CSS, garantizando compatibilidad automática con el modo oscuro.

    ¿Para quién es esta herramienta?

    • Desarrolladores frontend que desean ahorrarse la tediosa tarea de renombrar manualmente decenas de atributos SVG en cada entrega de diseño.
    • Ingenieros de sistemas de diseño que necesitan convertir lotes enteros de activos en una biblioteca tipada y consistente.
    • Equipos full-stack que buscan integrar rápidamente gráficos vectoriales sin sorpresas en el empaquetador.

    Tu código siempre te pertenece

    La privacidad es prioritaria. Todo el proceso de parseo y transformación del árbol DOM tiene lugar en tu navegador local mediante JavaScript. Tu código vectorial jamás se transmite a servidores remotos, garantizando total confidencialidad para tus creaciones y diseños propietarios.

    Última actualización:

    Herramientas de desarrollo relacionadas

    Explora otras calculadoras y herramientas para acelerar tu trabajo.

    Convertidor de colores

    Convierte colores entre formatos HEX, RGB, RGBA, HSL, HSLA y OKLCH con paleta interactiva.

    Codificador y decodificador Base64

    Codifica imágenes a Base64 y decodifica cadenas Base64 a imágenes.

    Compresor de imágenes

    Comprime y optimiza imágenes JPG, PNG y WebP en el cliente sin subirlas a ningún servidor.

    Formateador JSON

    Embellece, valida y minifica datos JSON con resaltado de sintaxis.