Reto: heroicons con TailwindCSS

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>

Creo modificaron el api?

ahí va la cosa

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 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</h2>
                <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:

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</h2>
                <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.