# Heroicon

Cette page est totalement optionnel pour apprendre à faire un composant. Mais elle vous permettra d'apprendre à utiliser [Heroicon](https://heroicons.com/).

Heroicon est un ensemble de SVG utilisable sous forme JSX avec React et Tailwind CSS.


# Continuation de l'exemple de Premier Composant React

L'icône Home peut être importé comme tout composant React.

Il existe plusieurs type de chaque icône de Heroicon : `outline`, `solid`, `mini`. Utilisons donc `outline`.

```tsx
import { HomeIcon } from '@heroicons/react/outline';

...

export function Home({ goHome }: IHomeProps): JSX.Element {
  const defaultIndex = Math.floor(Math.random() * (colors.length - 1));
  const [index, setIndex] = useState<number>(defaultIndex);

  const selectedColor = colors[index];
  const className = `${selectedColor}`;
  return (
    <button
      className={className}
      type='button'
      onClick={goHome}
      onMouseEnter={() => {
        const newIndex = Math.floor(Math.random() * (colors.length - 1));
        setIndex(newIndex);
      }}
    >
      <HomeIcon />
      Home
    </button>
  );
}

```