À propos du projet

# Ionicons [Ionicons](http://ionicons.com/) est un ensemble d'icônes entièrement open-source avec 1 300 icônes conçues pour le web, iOS, Android et les applications de bureau. Ionicons a été créé pour [Ionic Framework](https://ionicframework.com/), donc les icônes ont à la fois des versions Material Design et iOS. Remarque : Toutes les icônes de marque sont des marques déposées de leurs propriétaires respectifs. L'utilisation de ces marques ne signifie pas que Ionic approuve le titulaire de la marque, ni vice versa. Nous avons l'intention que ce pack d'icônes soit utilisé avec [Ionic](http://ionicframework.com/), mais il n'y est en aucun cas limité. Utilisez-les où bon vous semble, à titre personnel ou commercial. Elles sont gratuites et sous licence [MIT](http://opensource.org/licenses/MIT). ## Contribution Merci pour votre intérêt à contribuer ! Lisez nos directives pour [contribuer](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md) puis parcourez nos problèmes avec une étiquette [aide souhaitée](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22). ## Utilisation du composant Web Le composant Web Ionicons est un moyen facile et performant d'utiliser Ionicons dans votre application. Le composant chargera dynamiquement un SVG pour chaque icône, donc votre application ne demande que les icônes dont vous avez besoin. Notez également que seules les icônes visibles sont chargées, et que les icônes "sous la ligne de flottaison" et cachées de la vue de l'utilisateur ne font pas de requêtes de récupération pour la ressource svg. ### Installation Si vous utilisez [Ionic Framework](https://ionicframework.com/), Ionicons est inclus par défaut, donc aucune installation n'est nécessaire. Vous voulez utiliser Ionicons sans Ionic Framework ? Placez le `<script>` suivant près de la fin de votre page, juste avant la balise fermante `</body>`, pour les activer. ```html <script type="module" src="https://esm.sh/ionicons@latest/loader"></script> <script nomodule src="https://esm.sh/ionicons@latest/loader"></script> ``` Vous pouvez remplacer `latest` pour choisir n'importe quelle version d'Ionicons, par exemple : ```html <script type="module" src="https://esm.sh/ionicons@8.0.0/loader"></script> <script nomodule src="https://esm.sh/ionicons@8.0.0/loader"></script> ``` ### Utilisation de base Pour utiliser une icône intégrée du package Ionicons, remplissez l'attribut `name` sur le composant ion-icon : ```html <ion-icon name="heart"></ion-icon> ``` ### Icônes personnalisées Pour utiliser un SVG personnalisé, fournissez son URL dans l'attribut `src` pour demander le fichier SVG externe. L'attribut `src` fonctionne de la même manière que `<img src="...">` en ce sens que l'URL doit être accessible depuis la page web qui fait la demande pour l'image. De plus, le fichier externe ne peut être qu'un svg valide et ne permet pas de scripts ou d'événements dans l'élément svg. ```html <ion-icon src="/chemin/vers/fichier/externe.svg"></ion-icon> ``` #### Chemin d'actif personnalisé Si vous avez un ensemble d'icônes différent à charger ou si les icônes Ionicons sont hébergées sur une page ou un chemin différent, vous pouvez définir l'URL de l'actif à partir duquel Ionicons tire les icônes via : ```ts import { setAssetPath, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // définir le chemin racine pour charger les icônes à "<racine>/public/svg" setAssetPath(`${window.location.origin}/public/svg/`); // ne charger que des icônes spécifiques addIcons({ add, logoIonic, save }); ``` Cela permet l'utilisation d'icônes nommées comme ceci : ```html <!-- tire maintenant le svg de "<racine>/public/svg/heart.svg" --> <ion-icon name="heart"></ion-icon> ``` ## Variantes Chaque icône d'application dans Ionicons a une variante `filled`, `outline` et `sharp`. Ces différentes variantes sont fournies pour rendre votre application native à une variété de plateformes. La variante remplie utilise le nom par défaut sans suffixe. Remarque : Les icônes de logo n'ont pas de variantes outline ou sharp. ```html <ion-icon name="heart"></ion-icon> <!--rempli--> <ion-icon name="heart-outline"></ion-icon> <!--contour--> <ion-icon name="heart-sharp"></ion-icon> <!--net--> ``` ### Spécificité de la plateforme Lors de l'utilisation d'icônes dans Ionic Framework, vous pouvez spécifier différentes icônes par plateforme. Utilisez les attributs `md` et `ios` et fournissez le nom d'icône/variante spécifique à la plateforme. ```html <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon> ``` ## Taille Pour spécifier la taille de l'icône, vous pouvez utiliser l'attribut size pour nos tailles de police prédéfinies. ```html <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> ``` Ou vous pouvez définir une taille spécifique en appliquant la propriété CSS `font-size` sur le composant `ion-icon`. Il est recommandé d'utiliser des tailles en pixels qui sont un multiple de 8 (8, 16, 32, 64, etc.) ```css ion-icon { font-size: 64px; } ``` ## Couleur Spécifiez la couleur de l'icône en appliquant la propriété CSS `color` sur le composant `ion-icon`. ```css ion-icon { color: blue; } ``` ## Largeur de trait Lors de l'utilisation d'une variante d'icône `outline`, il est possible d'ajuster la largeur du trait, pour un meilleur équilibre visuel par rapport à la taille de l'icône ou par rapport à la largeur du texte adjacent. Vous pouvez définir une taille spécifique en appliquant la propriété personnalisée CSS `--ionicon-stroke-width` au composant `ion-icon`. La valeur par défaut est 32px. ```html <ion-icon name="heart-outline"></ion-icon> ``` ```css ion-icon { --ionicon-stroke-width: 16px; } ``` ## Migration depuis v4 Consultez les [notes de version 5.0](https://github.com/ionic-team/ionicons/releases/tag/5.0.0) pour une liste des suppressions/renommages d'icônes. ## Licence Ionicons est sous licence [MIT](http://opensource.org/licenses/MIT). ## Liens connexes * [Page d'accueil Ionicons](http://ionicons.com/) * [Ionic Framework](https://ionicframework.com/) * [Ionic Discord](https://ionic.link/discord) * [Forum Ionic](https://forum.ionicframework.com/) * [Stencil](https://stenciljs.com/) * [Capacitor](https://capacitorjs.com/)