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 | yes | true | draw-fade | draw | fade-up | fade | no | Animation SVG au scroll (défaut : aucune). yes/true sélectionne automatiquement l'animation selon le type : draw-fade pour outline, fade-up pour solid. fade applique un fondu simple sans dessin de tracé. |
Animation
Par défaut, les icônes sont statiques. Ajoutez data-icon-animate pour activer une animation au scroll :
| 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 |
no | Aucune animation | — |
En plus, un léger scale(1.15) s'applique au survol du parent (<a>, <button>).
<!-- Icône statique (par défaut) -->
<span data-icon="heart"></span>
<!-- Activer l'animation au scroll -->
<span data-icon="heart" data-icon-animate="true"></span>
<!-- Animation spécifique -->
<span data-icon="heart" data-icon-animate="draw"></span>
<!-- Sans animation (explicite) -->
<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>Toutes les icônes
Pour configurer des animations sur les icônes, utilisez le constructeur d'icônes dans le configurateur.
Constructeur d'icônes
Le configurateur inclut un constructeur d'icônes avec recherche, aperçu et sélection du type (outline/solid) et de l'animation (draw, fade).
Sécurité
Les SVG chargés sont automatiquement nettoyés avant injection dans le DOM :
- Suppression des éléments dangereux (
script,iframe,foreignObject,embed,object,use) - Suppression de tous les gestionnaires d'événements (
on*) - Protection contre l'injection XSS via SVG malveillants
Problèmes courants
- L'icône ne s'affiche pas : vérifiez que
icons.jsest chargé avecdeferet que le nom de l'icône existe dansassets/icons/. - L'icône reste invisible : ne pas ajouter
data-icon-animatesur de petites icônes (<24px) dans des boutons — l'animation démarre àopacity: 0et attend le scroll. - La couleur ne change pas : l'icône hérite de
currentColorvia CSS. Appliquez la couleur sur le parent (color: red) ou utilisezdata-icon-color.