Saltar al contenido
SvgJsx
Idioma: Español

Cómo usar iconos SVG en React

Hay cinco formas habituales de incluir iconos SVG en una aplicación de React. Esta guía las compara en rendimiento, estilos y accesibilidad, y explica cuándo conviene cada una.

Ajustes rápidos:
Suelta archivos .svg aquí oLos archivos se leen localmente con FileReader y nunca se suben.
Opciones
Exportación:
import type { SVGProps } from "react";

const HeartIcon = ({ size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: number | string }) => (
  <svg viewBox="0 0 24 24" className="icon icon-heart" width={size} height={size} {...props}>
    <g id="Layer_1" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "currentColor" }} />
    </g>
  </svg>
);

export default HeartIcon;

Vista previa

Vista previa del SVG convertido
SVG original
706B
SVG optimizado
548B(-22 %)
Componente
692B

1. Componentes SVG en línea

Convertir cada icono en un componente (el enfoque que automatiza este sitio) te da control total: los iconos heredan el color mediante currentColor, aceptan props como size y className y se pueden animar con CSS o con una librería de animación. Los bundlers eliminan los componentes no usados (tree shaking), así que solo envías los iconos que importas.

La contrapartida es que el marcado pasa a formar parte del bundle de JavaScript. Con unas decenas de iconos pequeños es insignificante; con cientos de ilustraciones complejas, no.

2. Etiquetas img y fondos CSS

<img src="/logo.svg" alt="Empresa"> es la opción más sencilla y el navegador puede almacenar el archivo en caché. Sin embargo, el SVG queda aislado de tu CSS, así que no puedes cambiar su color al pasar el ratón ni en modo oscuro. Úsalo para logotipos e ilustraciones que no cambian.

3. SVGR y loaders en tiempo de compilación

SVGR (mediante @svgr/webpack o vite-plugin-svgr) convierte los imports de .svg en componentes al compilar. Es cómodo para carpetas de iconos grandes, pero añade configuración al build y puede comportarse de forma distinta según el bundler o con Turbopack. Convertir una vez con esta herramienta produce el mismo tipo de componente como código fuente que puedes versionar.

4. Sprites SVG y 5. librerías de iconos

Un sprite reúne muchos elementos <symbol> en un archivo y los referencia con <use href="#icono">. Mantiene el HTML ligero, pero complica el renderizado en servidor. Librerías como Lucide, Heroicons o Phosphor ofrecen componentes ya hechos y son ideales cuando su estilo encaja con tu diseño.

Elijas el método que elijas, sigue estas reglas de accesibilidad:

  • Los iconos decorativos junto a un texto llevan aria-hidden="true".
  • Los iconos independientes, como un botón que solo tiene icono, necesitan un nombre accesible mediante aria-label en el botón o un <title> dentro del SVG.
  • Mantén el viewBox y dimensiona los iconos en em o rem para que escalen con el tamaño de letra del usuario.
  • Asegura una relación de contraste de al menos 3:1 en los iconos con significado (WCAG 1.4.11).

Preguntas frecuentes

¿Cuál es la mejor forma de usar iconos SVG en React?

Para iconos de interfaz, los componentes en línea con currentColor y una prop size son lo más flexible. Usa <img> para ilustraciones estáticas y una librería de iconos cuando su estilo encaje con tu diseño.

¿Los iconos SVG en línea perjudican el rendimiento?

Rara vez. Un icono típico de 24×24 ocupa entre 300 y 600 bytes tras optimizarlo. Los problemas solo aparecen al renderizar cientos de iconos complejos a la vez, y en ese caso es mejor un sprite o <img>.

¿Uso SVGR o convierto los iconos manualmente?

SVGR encaja con sets de iconos grandes que cambian a menudo y un pipeline de build estable. Los componentes preconvertidos no necesitan configuración y funcionan igual en cualquier bundler.

¿Cómo hago accesibles los iconos SVG?

Oculta los iconos decorativos con aria-hidden="true" y da a los que tienen significado un nombre accesible con aria-label o un <title>. Nunca dependas solo de un icono para transmitir información crítica.

¿Cómo dimensiono iconos SVG con Tailwind?

Quita width y height fijos, conserva el viewBox y aplica clases como size-5 o h-4 w-4. También puedes activar la prop size y pasar un número.