Icônes dans Leafy
Leafy propose une bibliothèque d'icônes intégrée pour faciliter l'ajout de pictogrammes dans vos applications. Cette section vous explique comment utiliser ces icônes dans vos projets.
Intégration des icônes
Pour utiliser les icônes Leafy, assurez-vous d'avoir bien inclus la feuille de style et le script JavaScript du framework dans votre projet :
<link rel="stylesheet" href="https://leafy.campagnesartois.fr/1.0.0/styles/style.min.css">
<script type="module" src="https://leafy.campagnesartois.fr/1.0.0/js/main.js"></script>
Utilisation des icônes
Les icônes s'intègrent facilement à l'aide de la balise <i> et du nom de l'icone à mettre dans data-icon="". Voici un exemple d'utilisation :
<i class="icon" data-icon="home"></i>
Exemple d'affichage
<button type="button">
<i class="icon" data-icon="home"></i>
Accueil
</button>
Liste des icônes disponibles
<button type="button">
<i class="icon" data-icon="home"></i>
Accueil
</button>
Voici les icônes disponibles dans Leafy :
| Nom de l'icône | Icône |
|---|---|
| home | |
| home-2 | |
| user | |
| user-square | |
| profile | |
| profile-2 | |
| profile-tick | |
| profile-tag | |
| arrow-down | |
| arrow-up | |
| arrow-left | |
| arrow-right | |
| down-next | |
| up-next | |
| double-arrow-left | |
| double-arrow-right | |
| remove | |
| add | |
| close | |
| check | |
| lock | |
| security | |
| login | |
| logout | |
| download | |
| eye | |
| eye-slash | |
| flag | |
| building | |
| house | |
| calendar | |
| clock | |
| info | |
| notification | |
| help | |
| danger | |
| search | |
| setting | |
| setting-2 | |
| printer | |
| menu | |
| application | |
| more | |
| external-link | |
| color-swatch | |
| gallery | |
| map | |
| element | |
| document-group | |
| folder | |
| folder-connection | |
| copy | |
| copy-code | |
| clipboard | |
| edit | |
| magicpen |