Cómo insertar un SVG en React: guía de métodos y componentes

Aprender a insertar un SVG en React es una habilidad técnica fundamental para incorporar logotipos, ilustraciones e iconos vectoriales a las aplicaciones web construidas con esta librería de JavaScript.

Los archivos SVG (Scalable Vector Graphics) ofrecen una ventaja decisiva frente a formatos de mapa de bits (como PNG o JPG): no pierden nitidez al escalar la pantalla y su peso en kilobytes es infinitamente menor.

Existen diversas formas de integrar elementos gráficos vectoriales dentro del árbol de componentes JSX de una interfaz. A lo largo de esta guía práctica explicaremos cómo estructurar la carpeta de recursos de tu proyecto, los métodos principales para insertar un SVG en React (como imagen estática, como componente reutilizable, inline JSX y con herramientas modernas como Vite) y cómo manipular sus propiedades de tamaño y color con CSS.

---

Preparación inicial: organización de archivos vectoriales

Antes de comenzar a insertar un SVG en React, se recomienda mantener una arquitectura limpia de proyecto. Dentro de la carpeta raíz de código fuente src, crea una subcarpeta dedicada a gestionar tus medios visuales llamada assets.

Dentro de la carpeta assets guardaremos nuestro archivo gráfico. Supongamos que estamos maquetando la cabecera de un clon de Twitter y creamos el archivo twitter.svg. El código interno estándar de un archivo SVG se compone de etiquetas XML como <svg>, <g> y caminos de trazado <path>:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g>
    <path d="M23.643 4.937c-.835.37-1.732.62-2.675.733..." />
  </g>
</svg>

1. Insertar un SVG en React mediante la etiqueta <img>

Es la alternativa más directa para insertar gráficos que no requieren modificaciones dinámicas de color mediante eventos del usuario.

Consiste en importar el archivo .svg como si fuese un módulo de imagen tradicional dentro del archivo del componente (por ejemplo, Header.jsx):

import logo from '../../assets/twitter.svg';

function Header() {
  return (
    <header>
      <div className="logo-container">
        <img src={logo} alt="Logotipo de Twitter" width="32" height="32" />
      </div>
      <nav></nav>
    </header>
  );
}

export default Header;

Recomendación de accesibilidad: Para evitar advertencias del linter en la consola del navegador, asegúrate de incluir siempre el atributo alt con una descripción textual.

2. Importar un SVG como un componente de React (SVGR / Create React App)

---

Cuando necesitas controlar el comportamiento interno del gráfico (como cambiar el color al hacer hover o aplicar transiciones), es preferible importar el archivo convirtiéndolo en un componente JSX.

En proyectos configurados con herramientas que incluyen el cargador SVGR, puedes importar utilizando la palabra clave ReactComponent:

import { ReactComponent as TwitterIcon } from '../../assets/twitter.svg';

function Header() {
  return (
    <header>
      <div>
        {/* Renderizado directo como componente con props de tamaño */}
        <TwitterIcon width={28} height={28} className="icono-animado" />
      </div>
    </header>
  );
}

3. Insertar un SVG en proyectos basados en Vite

En el desarrollo web moderno, Vite se ha convertido en el empaquetador preferido por su velocidad de compilación.

Para **insertar un SVG en React** como un componente interactivo dentro de un entorno configurado con Vite, se instala el paquete oficial vite-plugin-svgr y se utiliza la sintaxis especial con el sufijo ?react:

// Importación en entornos Vite con vite-plugin-svgr
import TwitterLogo from '../../assets/twitter.svg?react';

function Header() {
  return (
    <header>
      <TwitterLogo fill="#1DA1F2" width={30} height={30} />
    </header>
  );
}

4. Renderizado inline JSX y cambio de colores con CSS

Si deseas un control absoluto sobre cada parte del gráfico, puedes transformar el SVG en un componente funcional nativo de React.

Al sustituir el valor rígido de los atributos de color por fill="currentColor", el gráfico heredará automáticamente la propiedad color declarada en tu hoja de estilos CSS:

// Componente vectorial nativo reutilizable
const IconoTwitter = ({ size = 24, color = "currentColor" }) => (
  <svg 
    xmlns="http://www.w3.org/2000/svg" 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill={color}
  >
    <path d="M23.643 4.937c-.835.37-1.732.62-2.675.733..." />
  </svg>
);

export default IconoTwitter;

Uso de librerías externas: react-icons

En proyectos de gran envergadura donde se requieren decenas de iconos estandarizados (como los de FontAwesome, Feather o Material Design), instalar y gestionar archivos locales uno a uno puede restar eficiencia.

La librería react-icons permite importar iconos vectoriales de forma bajo demanda:

import { FaTwitter } from 'react-icons/fa';

function Header() {
  return (
    <header>
      <FaTwitter color="#1DA1F2" size={26} />
    </header>
  );
}

Cómo conectar el desarrollo con React con tu futuro laboral

Dominar la maquetación de interfaces con React, el manejo de activos vectoriales y el flujo de componentes es una competencia básica requerida en las ofertas de empleo del sector informático.

Si estás organizando tu mapa de decisiones, te invitamos a consultar nuestra guía sobre qué aprender primero en programación.

Comprender cómo se dividen las responsabilidades evaluando la diferencia entre frontend, backend y full stack te ayudará a estructurar tu perfil técnico.

Durante la construcción de tus proyectos con React, administrarás repositorios sabiendo qué es Git y por qué es tan importante para trabajar en equipo.

A nivel de almacenamiento de información en el servidor, verificarás transacciones seguras comprobando qué es ACID en bases de datos.

En organizaciones avanzadas que automatizan el despliegue de aplicaciones web, este aprendizaje conecta directamente con entender qué es MLOps y por qué es clave en ingeniería de software.

Para aquellos desarrolladores que buscan especializarse en la gestión de infraestructura en la nube para respaldar aplicaciones frontend y backend, recomendamos explorar el Programa Técnico Avanzado en DevOps con IA y LLMops.

---

Conclusión

En definitiva, saber cómo insertar un SVG en React mediante la etiqueta <img>, importación como componente o sintaxis inline JSX te permitirá elegir la estrategia gráfica más adecuada para tu aplicación.

El uso correcto de gráficos vectoriales garantiza interfaces de usuario rápidas, limpias y preparadas para cualquier resolución de pantalla.

Aprender las mejores prácticas del desarrollo Frontend con la guía de mentores en activo es el camino más eficiente para consolidar tu perfil profesional en la industria de la tecnología.

---

Si quieres aprender desarrollo web desde cero, dominar la creación de SPA complejas con React, Node.js, HTML5 y CSS3 con proyectos reales y contar con el apoyo de nuestra Bolsa de Talento activa, descubre el Desarrollo Web Full Stack Bootcamp de KeepCoding y transforma tu futuro laboral hoy mismo.

Para consultar más detalles sobre el funcionamiento de los componentes y las directrices de renderizado, puedes revisar la documentación oficial de React (react.dev).