Integrar íconos profesionales en una tienda online hecha con React mejora la experiencia visual y reemplaza emojis improvisados por elementos consistentes. Aquí aprenderás a instalar la librería Heroicons, importarla y usarla como componente dentro de un product detail, una card y un navbar, aplicando estilos con Tailwind CSS.

¿Cómo se instala la librería de íconos en un proyecto React?

La documentación oficial en GitHub describe tres pasos: instalación, importación y uso como componente. El flujo es el mismo que seguirías con cualquier librería de terceros.

Desde la terminal del proyecto ejecutas el comando que entrega la documentación con npm y esperas a que termine la instalación [01:30]. Una vez listo, ya puedes traer los íconos al archivo donde los necesites.

¿Qué es Heroicons? Es una librería de íconos SVG lista para usar en React como componentes. Cada ícono se importa por su nombre, por ejemplo XMark, Plus o ShoppingBag.

¿Dónde debe ir el import de una librería externa?

La convención es ubicar las librerías de terceros en la parte superior del archivo, justo debajo de los imports de React y antes de los componentes propios [02:10]. Esto mantiene un orden visual claro:

• Imports de React arriba.
• Librerías de terceros en el medio.
• Componentes locales abajo.

Ese orden facilita leer el archivo cuando vuelves a él semanas después.

¿Cómo se usa un ícono como componente en JSX?

Una vez importado, el ícono se invoca con la sintaxis de etiqueta JSX y recibe propiedades como cualquier otro componente. La documentación recomienda pasarle un className con color, ancho y alto.

En el caso del product detail, el ícono que cierra el panel lateral debe ser una X. Buscando en la galería de la librería aparece como XMark [03:25]. El componente queda así, con clases de Tailwind para color negro y tamaño fijo:

jsx import { XMarkIcon } from '@heroicons/react/24/solid'

<XMarkIcon className='text-black w-6 h-6' />

Un detalle común al pegar código de la documentación es olvidar cerrar correctamente las comillas del className. Si la X no aparece, revisa primero ese cierre.

¿Cómo cambio un emoji por un ícono dentro de una card?

En el componente Cart había un signo más representado con texto. Lo reemplazas importando PlusIcon y colocándolo donde estaba el carácter. El mismo patrón aplica al navbar, donde un emoji de carrito se sustituye por ShoppingBagIcon [05:00].

¿Cuál es la diferencia entre usar un emoji y un ícono SVG? El emoji depende del sistema operativo y cambia de estilo entre dispositivos. Un ícono SVG de Heroicons se ve idéntico en todos los navegadores y acepta clases de Tailwind para color y tamaño.

¿Cómo alineo un ícono con un contador usando Tailwind?

El ícono de la bolsa de compras debe mostrar a su derecha un número con la cantidad de productos. Si los dos elementos están dentro de un mismo li, basta con envolverlos en un div y aplicar flex para que se ubiquen en línea.

Las clases que resuelven la alineación son directas:

• flex para colocar los elementos uno al lado del otro.
• items-center para centrar verticalmente el ícono y el número.
• justify-center cuando necesitas centrar también en el eje horizontal.

Con esa combinación, el contador queda pegado a la bolsa sin desalineaciones [07:20]. Flexbox aplicado con utilidades de Tailwind reemplaza varias líneas de CSS tradicional.

¿Por qué importa el orden de los imports en React?

Mantener React arriba, librerías externas en medio y componentes propios abajo no es solo estética. Ayuda a detectar dependencias rápidamente y evita conflictos cuando varios archivos usan el mismo ícono con nombres distintos.

En la práctica, cada vez que agregas un nuevo ícono como XMark, Plus o ShoppingBag, el import correspondiente se suma al bloque de terceros y el componente se invoca donde lo necesites.

Con estos íconos ya integrados, el siguiente paso es conectar el clic sobre una card con el panel lateral del product detail usando el contexto global de React. ¿Qué ícono te ha costado más encontrar en la documentación de Heroicons?