Icônes
324 icônes Heroicons en outline et solid. Cliquez sur une icône pour copier le snippet ou le SVG brut.
Utilisation
Ajoutez l'attribut data-icon sur n'importe quel élément :
<span data-icon="heart"></span>
<!-- Avec options -->
<span data-icon="heart"
data-icon-type="solid"
data-icon-size="32"
data-icon-color="#ef4444"
data-icon-animate="no"></span>Attributs
| Attribut | Valeur | Description |
|---|---|---|
data-icon="nom" | Nom de l'icône | Requis — nom du fichier SVG (sans extension) |
data-icon-type | outline | solid | Style (défaut : outline) |
data-icon-size | Nombre en px | Taille (défaut : 24) |
data-icon-color | Couleur CSS | Couleur (défaut : currentColor) |
data-icon-animate | draw-fade | draw | fade-up | no | Animation SVG au scroll (défaut : draw-fade outline, fade-up solid) |
Animation
Par défaut, les icônes s'animent au scroll via le système d'animations SVG :
| Valeur | Effet | Idéal pour |
|---|---|---|
draw-fade | Dessin progressif + fondu (défaut outline) | Icônes outline |
draw | Dessin progressif seul | Icônes outline |
fade-up | Fondu + montée (défaut solid) | Icônes solid |
fade | Fondu simple | Tous types |
fill | Remplissage progressif | Icônes solid |
no | Aucune animation | — |
En plus, un léger scale(1.15) s'applique au survol du parent (<a>, <button>).
<!-- Animation par défaut (draw-fade pour outline) -->
<span data-icon="heart"></span>
<!-- Forcer une animation spécifique -->
<span data-icon="heart" data-icon-animate="draw"></span>
<!-- Sans animation -->
<span data-icon="heart" data-icon-animate="no"></span>Inclure dans une page
<link rel="stylesheet" href="core/css/icons.css">
<script src="core/js/icons.js" defer></script>