FlowingDev

SVG en React: De imagen estática a componente dinámico

Aprende cómo transformar imágenes SVG estáticas en componentes de React (JSX/TSX) dinámicos y reutilizables que pueden aceptar props, cambiar de color y más.

Probar la herramienta: De SVG a JSX

En una frase

SVG a JSX convierte el código de tu imagen vectorial en un componente de React reutilizable, haciéndolo dinámico y controlable con props en lugar de ser solo un archivo estático.

El problema que resuelve

En los viejos tiempos de la web (onda, hace cinco años), si querías mostrar un ícono SVG, probablemente lo lanzabas en una etiqueta <img>: <img src="/icons/user.svg" alt="Perfil de usuario" />. Trabajo listo. ¡A producción!

Pero este enfoque simple es una pequeña trampa. Tu SVG ahora es una caja negra. ¿Quieres cambiar su color cuando el usuario pasa el cursor sobre el botón que lo contiene? Mala suerte. El navegador lo trata como cualquier otro archivo de imagen (un JPG, un PNG) y no puedes estilizar sus entrañas con CSS fácilmente. ¿Quieres animar uno de los trazados dentro del ícono? Nop. ¿Quieres cambiar su color para un tema de modo oscuro? Te tocará crear un archivo completamente nuevo (user-white.svg) y escribir lógica para intercambiar el src. Se vuelve un lío muy rápido.

"¡Ajá!", dice el desarrollador astuto. "¡El SVG es solo código XML! ¡Voy a copiar el código del archivo .svg y pegarlo directamente en el return de mi componente!".

// MyComponent.js
const MyComponent = () => (
  <div>
    <p>Mi Perfil</p>
    {/* ¡Acabo de pegar esto desde un archivo .svg! */}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="black"/>
    </svg>
  </div>
);

A esto se le llama "inlining" (incrustar el código), y es un avance gigante. Ahora el SVG es parte del DOM y sí puedes estilizarlo con CSS. Pero cambiaste un problema por otro.

  1. Es aparatoso: Ese pegote de código SVG hace que tu componente sea más difícil de leer. Imagina si tuvieras cinco íconos ahí dentro.
  2. No es reutilizable: ¿Necesitas ese ícono de usuario en otro lado? Prepárate para copiar y pegar todo ese bloque de código otra vez.
  3. No es JSX: React tiene su propio dialecto de HTML. Atributos como stroke-width deben estar en camelCase como strokeWidth, y class se convierte en className. Olvidarse de convertir esto puede llevar a fallos silenciosos o ruidosas advertencias en la consola.

La verdadera solución es tratar los íconos no como assets estáticos, sino como ciudadanos de primera clase en tu ecosistema de componentes. Quieres tener <IconoUsuario color="blue" size={24} />. Este es el problema que resuelve la conversión de SVG a JSX: automatiza el código repetitivo (boilerplate) de convertir código SVG crudo en un componente de React limpio, reutilizable y manejado por props.

Cómo funciona por debajo

Convertir un bloque de texto en un componente de React pulido puede parecer magia, pero es un proceso predecible, paso a paso. Echemos un vistazo tras bambalinas.

Paso 1: Parseando el código SVG

Primero, la herramienta tiene que entender el SVG. Como el SVG es un dialecto de XML, se puede parsear en una estructura de árbol de nodos, igual que un documento HTML. Cada elemento (<svg>, <path>, <g>, etc.) se convierte en un nodo, y sus atributos (width, fill, d, etc.) se convierten en propiedades de ese nodo.

Así que, esto:

<svg width="24" height="24">
  <path fill-rule="evenodd" d="..." />
</svg>

Es entendido por el parser como un árbol:

  • Nodo svg con atributos width="24" y height="24"
    • Nodo path con atributos fill-rule="evenodd" y d="..."

Paso 2: "JSX-ificando" los atributos

Aquí es donde ocurre la traducción específica para React. El parser recorre el árbol de nodos y convierte los atributos para que sean compatibles con JSX.

  • Camel-casing: Cualquier atributo con un guion (kebab-case) se convierte a camelCase. fill-rule se convierte en fillRule, stroke-width se convierte en strokeWidth.
  • Mapeo de palabras clave: Las palabras clave reservadas de JavaScript se reemplazan. La más común es class, que se convierte en className.
  • Atributos de estilo: Un atributo style="fill:red; stroke:blue" se convierte en un objeto de JavaScript: style={{ fill: 'red', stroke: 'blue' }}.

Entonces, <path fill-rule="evenodd" class="icon-path"> se transforma en su equivalente en JSX: <path fillRule="evenodd" className="icon-path">.

Paso 3: Envolviendo en un componente

Con el árbol SVG hablando JSX con fluidez, el siguiente paso es envolverlo en una estructura de componente funcional estándar de React. La versión más simple se ve así:

import React from 'react';

const MiIcono = () => {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24">
      {/* ... todos los paths y otros elementos JSX-ificados ... */}
    </svg>
  );
};

export default MiIcono;

Esto ya te da un componente reutilizable <MiIcono />, lo cual es una gran victoria. Pero el verdadero poder viene de hacerlo dinámico.

Paso 4: Agregando props y currentColor

Este es el ingrediente secreto. Un buen conversor no se limita a dejar fijos los atributos originales del SVG. Los hace configurables.

  • Distribuyendo Props: El componente se modifica para que acepte props y los distribuya en el elemento <svg> raíz. Esto se suele hacer usando la sintaxis ...rest. Ahora puedes pasar cualquier atributo estándar de SVG (como width, height, className, o aria-label) directamente a tu componente.

  • El truco de currentColor: Esto cambia las reglas del juego para el estilizado. El conversor encontrará atributos fill y stroke con valores fijos (ej. fill="#000000") y los reemplazará con la palabra clave especial de CSS currentColor.

currentColor le dice al navegador: "Cualquiera que sea el valor de la propiedad color de CSS en este elemento, úsalo para el fill/stroke". Esto significa que tu ícono ahora se comporta como texto. Si envuelves tu ícono en un div y le pones color: blue, el ícono se vuelve azul.

// El componente mejorado
const MiIcono = ({ color = 'currentColor', size = 24, ...rest }) => {
  return (
    <svg 
      width={size} 
      height={size} 
      fill={color} // o aplicado directamente a los paths
      {...rest}
    >
      <path d="..." fill="currentColor" />
    </svg>
  );
};

Paso 5: Reenvío de Refs (Forwarding Refs)

A veces, necesitas obtener una referencia directa al elemento <svg> real del DOM desde un componente padre, quizás para medir su posición o usarlo con una librería de terceros. Un componente funcional normal oculta su estructura interna del DOM. La solución es React.forwardRef.

Un conversor sofisticado envolverá el componente en React.forwardRef, lo que crea un conducto para pasar una ref desde el padre directamente a la etiqueta <svg> subyacente.

El componente final, de calibre profesional, a menudo se parece a algo así (ejemplo en TypeScript):

import * as React from 'react';

type Props = React.SVGProps<SVGSVGElement>;

const MyIcon = React.forwardRef<SVGSVGElement, Props>((props, ref) => (
  <svg ref={ref} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path d="..." fill="currentColor" />
  </svg>
));

MyIcon.displayName = 'MyIcon'; // Bueno para debuggear
export default MyIcon;

Historias del mundo real

La pesadilla del theming

Un equipo de frontend estaba construyendo una hermosa aplicación web que tenía tanto un modo claro como uno oscuro. Usaban unos 50 íconos, todos implementados como <img src="/icons/whatever.svg">. Los íconos eran negros. Cuando lanzaron el modo oscuro, cundió el pánico: los 50 íconos negros desaparecieron contra el nuevo fondo oscuro. Su primera "solución" desesperada fue exportar un segundo set de íconos blancos (whatever-dark.svg) y escribir lógica condicional retorcida (isDarkMode ? 'whatever-dark.svg' : 'whatever.svg') por todas partes. Fue un desastre de mantenimiento.

Entonces, un desarrollador introdujo un flujo de trabajo de SVG-a-JSX. Ejecutaron un script que convirtió los 50 SVGs en componentes de React, reemplazando crucialmente todos los atributos fill="black" con fill="currentColor". Reemplazaron todas las etiquetas <img> con sus nuevos componentes de ícono, como <WhateverIcon />. Instantáneamente, los íconos heredaron su color del color de texto del padre, que ya era manejado por el CSS del tema. Modo claro: texto negro, íconos negros. Modo oscuro: texto blanco, íconos blancos. Simplemente funcionó.

Lección: Incrustar SVGs como componentes les permite integrarse perfectamente con el sistema de diseño y los estilos existentes de tu aplicación, salvándote del infierno de la gestión de assets.

El checkmark animado

Un product manager quería una animación "encantadora": cuando un usuario completa un formulario, un checkmark debería dibujarse dinámicamente en la pantalla. Usar un GIF animado estaba descartado: se veía pixelado y era un archivo pesado. La desarrolladora intentó buscar una librería, pero ninguna se ajustaba del todo al diseño personalizado del checkmark.

Tomando el asunto en sus propias manos, tomó el SVG estático del checkmark que le dio el diseñador y lo convirtió en un componente JSX. Esto le dio acceso directo al elemento <path> del checkmark dentro de su código React. Usando una simple transición de CSS en las propiedades stroke-dasharray y stroke-dashoffset de ese path, pudo crear el efecto exacto de "dibujo" que quería. La animación era súper fluida, infinitamente escalable y ocupó menos de 1KB de código.

Lección: Convertir un SVG en un componente desbloquea el control granular sobre sus partes individuales, haciendo posibles animaciones complejas impulsadas por CSS o JavaScript.

Errores y trampas comunes

  • Olvidar la accesibilidad. Un ícono que transmite un significado (como una "X" de cerrar) no es solo decoración. Si eliminas la etiqueta <title> durante la conversión, un lector de pantalla podría anunciarlo como "grupo" o simplemente ignorarlo. Asegúrate siempre de que tu componente final tenga un prop aria-label apropiado o un nombre accesible a través de un elemento <title> dentro del SVG. Un buen componente se renderizará como <svg role="img" ...>.
  • Inflando el bundle. Incrustar SVGs significa que su código ahora es parte de tu bundle de JavaScript. Para unas pocas docenas de íconos de UI pequeños, esto es una ganancia neta (menos peticiones HTTP). Pero si intentas incrustar una ilustración enorme y compleja con miles de paths, puedes inflar seriamente el tamaño de tu bundle y ralentizar la carga inicial de la página. Para ilustraciones grandes y estáticas, <img> sigue siendo una opción perfectamente válida.
  • Ignorar la optimización previa. Los SVGs exportados desde herramientas de diseño como Figma o Adobe Illustrator son famosos por ser un desastre. Contienen metadatos del editor, comentarios, capas ocultas y valores decimales excesivamente precisos. Meter esto a la fuerza en un componente JSX resulta en código inflado y difícil de leer. Siempre pasa tus SVGs por un optimizador como SVGO antes de convertirlos. Esto a menudo puede reducir el tamaño del código en un 50% o más.
  • La edición manual se convierte en un problema de sincronización. Conviertes icon.svg a Icon.jsx. Luego, modificas manualmente Icon.jsx para agregar una función. Una semana después, el diseñador te da un icon.svg actualizado. Ahora tienes que elegir: volver a ejecutar la conversión y perder tus ediciones manuales, o intentar parchear manualmente el nuevo diseño en tu JSX editado. La fuente de la verdad debería ser el archivo .svg; la conversión a JSX debería ser un script repetible y automatizado.

Por qué debería estar en tu radar

Deberías pensar en convertir SVGs a JSX siempre que estés construyendo una aplicación web basada en componentes (React, Preact, etc.) y tus íconos necesiten ser más que simples imágenes estáticas.

Es la herramienta adecuada cuando:

  • Necesitas que los íconos cambien de color, tamaño o grosor de trazo según el estado o los props.
  • Estás construyendo un sistema de diseño o una librería de componentes y necesitas una forma escalable y consistente de gestionar los íconos.
  • Quieres animar partes de un ícono.
  • Estás optimizando el rendimiento y quieres reducir el número de peticiones de red incrustando íconos críticos.

En el desarrollo frontend moderno, tratar tus íconos como componentes no es un hack, es el estándar para construir interfaces de usuario dinámicas, mantenibles y de alto rendimiento.

Profundiza más

Teoría lista. Hora de ensuciarse las manos — 100% en tu navegador.

Probar la herramienta: De SVG a JSX