> For the complete documentation index, see [llms.txt](https://akyos.gitbook.io/book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akyos.gitbook.io/book/wordpress/guides/ajouter-une-icone.md).

# Ajouter une icône

### Intégrer une icône

{% hint style="warning" %}
En priorité, récupérez les icônes de la maquette.
{% endhint %}

* Exporter l'icône au format SVG
* Renommer clairement le fichier svg
* Placer le svg dans le dossier /icons
* Appeler l'icône avec la fonction avec la directive `@icon($filename)`

{% hint style="info" %}
Structure du dossier icons
{% endhint %}

```
├── resources
    ├── assets
        ├── images
            ├── icons
                ├ user.svg
                ├ cart.svg
                ├ arrow-right.svg
```

### Afficher une icône

La directive `@icon($filename)` permet de directement inclure un svg dans la vue

```
<div>
    @icon('user')
    <span>Nom</span>
</div>
```

### Bibliothèque icones externes

Dans le cas où aucune icône n'est proposée, on peut intégrer des bibliothèques d'icônes :&#x20;

* Icomoon : <https://icomoon.io/>
* Iconoir : <https://iconoir.com/>
* FontAwesome : <https://fontawesome.com/>

{% hint style="danger" %}
Attention à la surcharge du css, privilégiez les bibliothèques permettant d'intégrer uniquement les icônes utilisées
{% endhint %}