Reto: heroicons con TailwindCSS

Clase 12 de 31 • Curso de React.js con Vite.js y TailwindCSS

Resumen

En la era digital actual, aprovechar las herramientas disponibles para mejorar la interfaz de usuario de tu proyecto es esencial. Los íconos juegan un papel crucial en la experiencia de navegación, facilitando la comprensión y proporcionando pistas visuales que mejoran la usabilidad del producto. Vamos a explorar cómo podemos integrar y gestionar íconos en un proyecto de desarrollo web, utilizando una herramienta específica para enriquecer nuestra aplicación.

¿Cómo se pueden agregar íconos en la página de detalles de producto?

Agregar íconos en una página de detalles de producto es relativamente sencillo con el uso de librerías específicas. Estos son los pasos a seguir:

Primeramente, debemos verificar la documentación de la librería para comprender su funcionamiento básico.
Seguido, necesitamos instalar la librería, lo cual generalmente se realiza mediante un comando de consola proporcionado en la documentación.
Una vez instalada la librería, procederemos a importar los íconos que deseamos utilizar en nuestro editor de código.

¿Qué aspectos se deben considerar para usar los íconos correctamente?

Cuando trabajamos con íconos, es importante tomar en cuenta:

Los íconos deben ser importados como si fueran un componente.
Se debe asignar una clase para aplicar estilos como el color del texto y las dimensiones del ícono.
Para efectos de organización y buenas prácticas, se recomienda colocar los imports de librerías de terceros al principio del archivo.

¿Cómo se personalizan los íconos de acuerdo a las necesidades del proyecto?

La personalización es clave para que los íconos se integren armoniosamente en nuestro proyecto. Para ello, se deben modificar propiedades como el color y el tamaño, lo cual se especifica en la documentación. Además, es posible que tengamos que buscar en la librería los nombres correctos de los íconos que necesitamos e implementarlos en nuestro código.

¿Cuál es el proceso para integrar íconos en componentes específicos como la carta o el carrito de compras?

Para integrar íconos en los componentes, se deben seguir estos pasos:

Localizar el componente específico donde queremos añadir el ícono.
Importar el ícono correcto de la librería.
Reemplazar cualquier placeholder existente con el componente del ícono deseado.
Ajustar el nombre y propiedades del ícono según sea necesario.

¿Cómo podemos mejorar la presentación de los íconos en la interfaz?

La presentación visual de los íconos puede mejorarse utilizando herramientas de estilización como TailwindCSS:

Con Flexbox, por ejemplo, podemos alinear íconos y texto fácilmente.
Es posible organizar los elementos dentro de un contenedor para mejorar la disposición visual.
Ajustar la alineación y el espaciado entre íconos y texto para una estética más agradable.

Aprender a trabajar con íconos es solo un paso en tu viaje de desarrollo web. Recuerda, cada detalle cuenta y sigue influyendo en cómo los usuarios interactúan con tu producto. Sigue explorando, practicando y no dudes en profundizar en cada herramienta que puedas incorporar a tus proyectos. ¡Continúa aprendiendo y mejorando tus habilidades para llevar tus proyectos al siguiente nivel!

Miguel Angel Reyes Moreno

student•

Yo solo copié y pegué el SVG y con eso funciona igual, sin tener que añadir más dependencias al proyecto:

<button>
          {/* X close icon */}
        <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
          <path fillRule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clipRule="evenodd" />
        </svg>
        </button>

Josue Tapia Linarez

student•

Hice lo mismo. Considero la instalación de un paquete de iconos solo cuando el proyecto es grande y requiere una amplia variedad de iconos. Usar iconos en formato "SVG" en línea reduce el tamaño del proyecto y mejorar el rendimiento de la aplicación web.

JOSE FABIAN BONILLA GUZMAN

student•

yo igual y para el mas rote 45 grados en el classname

Miguel Ángel Bolaños Quiñonez

student•

Creo modificaron el api?

Miguel Ángel Bolaños Quiñonez

student•

Usé otra API

Abner Batz

student•

cuál?

Cristina Muñiz

student•

Estoy leyendo comentarios sobre que la aplicación es muy pequeña y que no ven necesario que se use un paquete de iconos.

Creo que no veis el potencial de esta clase. Ella nos esta enseñando un recurso que podemos usar para otros proyectos y que incluso nos lo encontremos en proyectos grandes y así sepamos de qué va la fiesta.

No seamos tan críticos y veamos el lado positivo de esto.

Rubén Ernesto Aragón Gil

student•

ahí va la cosa

Platzi Team

student•

buen avanze

Alexander Flores Rayme

student•

Hola lo que también pueden hacer es crear una carpeta que se llame Icons o iconos y crear un archivo como un componente de react y dentro copian solo los iconos que van a usar,(tienen que copiar el svg en jsx de heroicons) cran su componente y copian el svg y le pueden poner cualquier nombre así y luego lo importan: No me deja subir imagenes 😥 pero me entienden

Irma Nohemi Solis Loyo

student•

Si bien, es cierto que para aplicaciones chicas es bueno copiar y pegar SVG, me parece muy acertado por parte de la profesora enseñar la instalación y uso de íconos a partir de una dependencia. Me parece muy necesario y puede tener un pequeño grado más de complejidad que solo copiar y pegar. Por supuesto no siempre haremos proyectos chicos. Excelente clase <3

Luis Andrey Mora Wilches

student•

Con esta herramienta:

Pueden copiar cualquier svg que lo pasa a un jsx, luego pueden crear un archivo .jsx (en este caso) y copian lo que les arrojo la página, ya después solo sería importarlo donde lo necesiten como un componente normal dentro de las etiquetas <div/> o <button/> que estén utilizando y no olviden cambiar el nombre porque la pagina asigna uno por defecto. Esto para no copiar directamente el svg en la etiqueta ni instalar la dependencia claro esta que para cada proyecto existirán diferentes alternativas.

Victor Hugo Cruz Carballo

student•

Lucia Nishimiya

student•

Si le das click a los svg en https://heroicons.com/ puedes copiar el svg en JSX sin necesidad de instalar su paquete

export const ProductDetail = () => {
    return (
        <aside className='flex flex-col fixed right-0 border bg-gray-50 dark:bg-zinc-900 border-black rounded-lg w-[360px] h-[calc(100vh-80px)] top-[68px] z-10'>
            <div className='flex justify-between items-center p-6'>
                <h2 className='font-medium text-xl'>Details</h3>
                <button><svg xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                </button>
            </div>
        </aside>
    )
}

Donovan RM

student•

Aun me falta el tema del texto en la card que se me sale xD, pero ahí vamos:

Said Cueter

student•

Usa el classname "truncate". Es una clase de tailwind y te recorta el texto para que no salga del tamaño que colocaste para el ancho de tu contenedor.

Cristian Acalo

student•

🦄✨ Me gustó que Heroicons tiene una sintaxis muy intuitiva para sus nombres.

Y también que hay diferentes tipos de estilos para el mismo ícono. También que reduce las líneas de código en comparación a si estuviéramos insertando íconos con tags svg.

Les recomiendo que si instalen el paquete ;)

Angel David Velasco Bonifaz

student•

Para los que lo estan realizando con los menu aparte, y quieren insertar los iconos desde ahi, solo pude realizarlo pasando un componente, quedando mi array de esta forma.

const menu2=[
        {
            name:'angelvelasco@mvelectronica.com', 
            className: 'text-black/60',
            active: false
        },
        {
            name:'My Orders', 
            url:'/my-orders',
            className: '',
            active: true
        },
        {
            name:'My Account',
            url:'/my-account',
            className: '',
            active: true
        },
        {
            name:'Sign In',
            url:'/sign-in',
            className: '',
            active: true
        },
        {
            name: <Cart />, 
            className: '',
            active: false
        },
    ];
```y en el componente agregue el icono en componente y el count

```js
const Cart = () => {
    const { count } = useContext(ShoppingCartContext);
    return (
        <div className="flex">
            <ShoppingCartIcon className="h-6 w-6 text-black"/>
            <span>{count}</span>
        </div>
    );
};
```Hay que hacer las importaciones correspondientes.

Juan Diaz

student•

Recomiendo usar React Icons

Gilberto Santamaria

student•

Yo prefiero poner los iconos dentro de etiquetas button

<div className='flex justify-between items-center p-4'>
                <h2 className='font-medium text-xl'>Details</h3>
                <button>
                    <XMarkIcon className='h-6 w-6 text-blue-500' />
                </button>
            </div>

Jonathan Hernandez

student•

React Icons

import { AiFillCloseCircle } from "react-icons/ai"
const Aside = () => {
	return (
		<div>
             		<AiFillCloseCircle />
		</div>
	)
};

Las primeras dos letras son las que se deben indicar en la importación del icono, puede variar dependiendo del mismo.

Jonathan Hernandez

student•

<button>
          {/* X close icon */}
        <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
          <path fillRule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clipRule="evenodd" />
        </svg>
        </button>

export const ProductDetail = () => {
    return (
        <aside className='flex flex-col fixed right-0 border bg-gray-50 dark:bg-zinc-900 border-black rounded-lg w-[360px] h-[calc(100vh-80px)] top-[68px] z-10'>
            <div className='flex justify-between items-center p-6'>
                <h2 className='font-medium text-xl'>Details</h3>
                <button><svg xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                </button>
            </div>
        </aside>
    )
} 

const menu2=[
        {
            name:'angelvelasco@mvelectronica.com', 
            className: 'text-black/60',
            active: false
        },
        {
            name:'My Orders', 
            url:'/my-orders',
            className: '',
            active: true
        },
        {
            name:'My Account',
            url:'/my-account',
            className: '',
            active: true
        },
        {
            name:'Sign In',
            url:'/sign-in',
            className: '',
            active: true
        },
        {
            name: <Cart />, 
            className: '',
            active: false
        },
    ];
```y en el componente agregue el icono en componente y el count

```js
const Cart = () => {
    const { count } = useContext(ShoppingCartContext);
    return (
        <div className="flex">
            <ShoppingCartIcon className="h-6 w-6 text-black"/>
            <span>{count}</span>
        </div>
    );
};
```Hay que hacer las importaciones correspondientes.

<div className='flex justify-between items-center p-4'>
                <h2 className='font-medium text-xl'>Details</h3>
                <button>
                    <XMarkIcon className='h-6 w-6 text-blue-500' />
                </button>
            </div>

Reto: heroicons con TailwindCSS

Introducción

Construye una tienda online con React

Enrutamiento y estructura base

Instalación de React con Vite y TailwindCSS

Análisis de rutas y componentes en React

Enrutamiento con React Router DOM

Componente Navbar

Componente de Layout

Componente de Card

Consumiendo la FakeStore API para pintar cards

Manejo de estado global con Context

Contexto global de la aplicación

Contador de productos en el carrito

Abriendo el detalle de cada producto

Reto: heroicons con TailwindCSS

Maquetando el ProductDetail

Mostrando productos en ProductDetail

Carrito de Compras

Agregando productos al carrito

SideMenu del carrito de compras

Componente OrderCard

Evitando productos duplicados en el carrito

Eliminar productos del carrito

Suma total de productos en el carrito

Checkout y Órdenes de Compra

Flujo para crear una nueva orden

Checkout de productos en el carrito

Página de MyOrders: lista de órdenes

Página de MyOrder: órden individual

Reto: órdenes de compra con TailwindCSS

Filtrando productos desde el frontend

Buscador de productos

Filtrando títulos con JavaScript

Filtrando categorías con JavaScript

Corrigiendo bugs de la aplicación

Próximos pasos

Deploy de React en Netlify

¿Preparada o preparado para un Laboratorio de React?