41 lines
No EOL
1.1 KiB
Markdown
41 lines
No EOL
1.1 KiB
Markdown
# 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>
|
|
);
|
|
}
|
|
|
|
``` |