Reto: heroicons con TailwindCSS
Clase 12 de 31 • Curso de React.js con Vite.js y TailwindCSS
Contenido del curso
Miguel Angel Reyes Moreno
student•
hace 3 años
Josue Tapia Linarez
student•
hace 3 años
JOSE FABIAN BONILLA GUZMAN
student•
hace 3 años
Clase 12 de 31 • Curso de React.js con Vite.js y TailwindCSS
Contenido del curso
Miguel Angel Reyes Moreno
Josue Tapia Linarez
JOSE FABIAN BONILLA GUZMAN
Miguel Ángel Bolaños Quiñonez
Miguel Ángel Bolaños Quiñonez
Abner Batz
Cristina Muñiz
Rubén Ernesto Aragón Gil
Platzi Team
Alexander Flores Rayme
Irma Nohemi Solis Loyo
Luis Andrey Mora Wilches
Victor Hugo Cruz Carballo
Lucia Nishimiya
Donovan RM
Said Cueter
Cristian Acalo
Angel David Velasco Bonifaz
Juan Diaz
Gilberto Santamaria
Jonathan Hernandez
Jonathan Hernandez
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>
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.
yo igual y para el mas rote 45 grados en el classname
Creo modificaron el api?
Usé otra API
cuál?
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.
ahí va la cosa
buen avanze
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
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
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.
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> ) }
Aun me falta el tema del texto en la card que se me sale xD, pero ahí vamos:
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.
🦄✨ 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 ;)
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.
Recomiendo usar React Icons
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>
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.
