svg-layout-designer-react/docs/Tutorial/Pages/Heroicon.md

Heroicon

Cette page est totalement optionnel pour apprendre à faire un composant. Mais elle vous permettra d'apprendre à utiliser Heroicon.

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.

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>
  );
}