Pourquoi les icônes React peuvent être la seule bibliothèque d’icônes dont vous avez besoin —

Une icône unique au design élégant peut communiquer des actions et des idées complexes dans un langage universel compris d’un seul coup d’œil, prouvant à quel point les icônes sont cruciales pour améliorer l’expérience utilisateur globale. Mais où pouvez-vous vous procurer de telles icônes en tant que développeur React ?

La réponse réside dans les bibliothèques d’icônes – ou, pour aller plus loin, Réagir bibliothèques d’icônes. Une bibliothèque d’icônes React est essentiellement une collection d’icônes SVG prêtes à l’emploi qui peuvent être directement importées dans votre projet React. Ces bibliothèques proposent l’installation de packages npm, pnpm ou Yarn, après quoi vous pouvez en importer n’importe quelle icône avec seulement quelques commandes.

Cet article présente diverses fonctionnalités de React Icons (react-icons), l’une des bibliothèques d’icônes les meilleures et les plus populaires utilisées dans React. Il comprend également plusieurs bibliothèques d’icônes qui ne sont pas incluses dans la bibliothèque React Icons mais qui méritent d’être prises en compte.

Icônes React et ses fonctionnalités

Icônes de réaction est un projet open source qui vous permet d’utiliser plus de 30 jeux d’icônes de manière unifiée en installant simplement un seul package. Sa popularité augmente à mesure que les gens se convertissent d’autres bibliothèques à ce projet. Actuellement, la moyenne est supérieure à 1,5 million de téléchargements npm hebdomadaires et presque 11 000 étoiles GitHub au moment de la rédaction de cet article.

Il comprend uniquement des bibliothèques bien connues et de haute qualité qui créent collectivement plus de 45 000 icônes. Il y a donc une chance que vous trouviez toujours ce que vous cherchez. Il contient également des bibliothèques spécialisées pour certains cas d’utilisation, comme une application.

Pour vous donner une idée de ses bibliothèques, certaines des bibliothèques les plus populaires que vous pourriez reconnaître sont répertoriées ci-dessous, sans ordre particulier :

• Font Awesome (gratuits)
• Tabler Icons
• Icônes de phosphore
• BoîteIcônes
• Ligne géniale
• Icônes de conception de fourmis
• Icônes de remix
• Icônes d’amorçage
• Icônes de conception matérielle
• Icônes de héros
• Icônes de base

L’un des inconvénients de l’utilisation des icônes React, en particulier si vous utilisez des icônes provenant de différentes bibliothèques d’icônes, pourrait être la peur de l’incohérence. Vous devrez donc tester minutieusement votre cas d’utilisation. Néanmoins, les icônes React peuvent être utilisées pour importer des icônes populaires à partir d’une bibliothèque si c’est tout ce dont vous avez besoin pour votre projet React, et vous ne pouvez pas vraiment vous tromper avec l’une des options mentionnées ci-dessus.

Mais React Icons présente également des avantages significatifs. Une question que vous pourriez vous poser pourrait être liée à la taille, car cela ressemble à un gros package qui pourrait affecter les performances de votre application ou de votre site. Mais la bonne nouvelle est que React Icons utilise les importations ES6.

Au lieu d’ajouter l’ensemble des icônes à votre projet (qui peut être très volumineux), vous pouvez importer uniquement celles dont vous avez besoin. Cette importation sélective permet de réduire la taille de votre projet et de la rendre plus efficace. De plus, React Icons utilise uniquement des fichiers SVG, qui sont aujourd’hui considérés comme le meilleur format d’icône en raison du nombre réduit de requêtes réseau et de leur taille réduite.

La dernière chose à garder à l’esprit avant de passer à l’utilisation est que chaque bibliothèque d’icônes dans React Icons utilise sa licence spécifiée. Bien que toutes les bibliothèques d’icônes soient open source et autorisent une utilisation commerciale, certaines nécessitent une attribution comme les licences Creative Commons. Vous pouvez vérifier quelle bibliothèque utilise quelle licence sur le site React Icons ou sa page npm.

Utiliser les icônes React

La meilleure partie de React Icons est sa simplicité et sa facilité d’utilisation. Tout ce que vous avez à faire est d’installer le package via npm ou Yarn, d’importer votre bibliothèque concernée et vous êtes maintenant prêt à utiliser ses icônes.

Commencez par installer le package dans votre terminal :

npm install react-icons --save

Alternativement, vous pouvez faire ceci :

yarn add react-icons

Recherchez maintenant votre mot-clé et sélectionnez l’icône de votre choix. Dans notre cas, cela ressemble à ce qui est illustré ci-dessous.

Astuce : si vous souhaitez rechercher plus d’icônes dans une bibliothèque spécifique, ajoutez son préfixe à l’avance. La recherche de « fa Alarm » donnerait la priorité à l’affichage des icônes de la bibliothèque Font Awesome.

La première commande que vous voyez est celle que vous devez saisir pour importer cette icône spécifique dans votre projet. Le second n’est pas une commande mais le nom du composant, qu’il est utile de copier, car vous ne voudriez pas le saisir à chaque fois que vous souhaitez l’utiliser.

Revenons à l’importation des icônes :

import { CiAlarmOn } from "react-icons/ci";

Et pour importer plusieurs icônes depuis la même bibliothèque :

import { CiAlarmOn, CiAlarmOff } from "react-icons/ci";

Le meilleur dans tout cela est que chaque icône est un composant React, ce qui permet de les utiliser très facilement partout où vous le souhaitez :

import { CiAlarmOn, CiAlarmOff } from "react-icons/ci";

class Alarm extends React.Component {
  render() {
    return <h3> <CiAlarmOff /> You need to wake up! <CiAlarmOn /> </h3>
  }
}

Il est également possible de modifier la couleur et la taille de ces icônes à l’aide d’IconContext. Plus d’informations sur la configuration et l’utilisation peut être trouvé ici.

Avec plus de 45 000 icônes provenant de 30 bibliothèques d’icônes différentes et une mise en œuvre facile, React Icons peut être la seule bibliothèque d’icônes dont vous avez besoin pour vos projets React.

5 bibliothèques d’icônes React utiles ne figurant pas dans la bibliothèque d’icônes React

Cela dit, si vous ne trouvez pas vos icônes idéales ou si vous souhaitez essayer d’autres options, voici quelques bibliothèques d’icônes qui ne sont pas incluses dans React Icons (du moins pour le moment).

1. Icônes matérielles MUI

Interface utilisateur matérielle (MUI) est une bibliothèque open source qui fournit des composants React basés sur le Material Design de Google. Il ne s’agit pas simplement d’une bibliothèque d’icônes, mais d’une suite complète d’outils d’interface utilisateur conçus pour faciliter le développement et le déploiement rapides de projets.

Les icônes MUI Material bénéficient d’un soutien et d’une reconnaissance de longue date parmi les développeurs, car elles se vantent de 2,5 millions de téléchargements NPM hebdomadaires et plus 90 000 étoiles GitHub au moment de la rédaction de cet article. Les développeurs fans du design Material Icons de Google adoreront cette bibliothèque open source car elle comprend plus de 2000 icônes élégantes et modernes. Bien que React Icons inclut Icônes matérielles originales de Googlel’implémentation de MUI semble légèrement plus intuitive.

Un exemple est présenté ci-dessous, alors faites votre propre jugement. (Ignorez les couleurs, car elles peuvent être modifiées).

L’icône matérielle de Google et l’implémentation de MUI respectivement

Si vous êtes prêt à essayer MUI, vous pouvez vous référer à son Documentation concernant l’installation du package React et l’importation d’icônes. Cela permet également de configurer la taille et la couleur.

2. Police géniale Pro

Police géniale est une bibliothèque extrêmement populaire et le deuxième technologie de script de police la plus utilisée sur Internet juste derrière Google Fonts. Il propose une large gamme d’icônes couvrant diverses catégories, notamment les médias sociaux, le Web, les entreprises, etc.

Il est également livré avec plusieurs intégrations vous permettant d’utiliser ces icônes, notamment son propre composant Figma, AngularJS, Vue et bien sûr React.

Actuellement, il propose plus de 4 000 icônes gratuites (v5, v6), tandis que le forfait payant porte ce chiffre à plus de 30 000 icônes. Mais l’objectif principal de cette section est Font Awesome Pro, car des icônes gratuites sont déjà disponibles dans React Icons.

Si vous êtes un développeur qui crée souvent des sites Web et qui a un intérêt secondaire pour la conception, alors Font Awesome Pro peut être intéressant à considérer. Certains forfait payant les fonctionnalités incluent:

• personnalisation plus facile pour la taille, la couleur et les modifications majeures de l’icône elle-même
• une mise en œuvre mieux optimisée grâce à Kits géniaux de polices
• possibilité de télécharger vos propres icônes dans Kit pour les utiliser avec Font Awesome
• Bande passante de registre privé pour vos projets utilisant les registres privés npm, Ruby et Python

Font Awesome possède également son propre composant React, donc tout comme React Icons, vous pouvez facilement intégrer ses icônes dans votre projet avec quelques commandes. Police géniale documentation sur l’utilisation est assez détaillé et largement suffisant pour commencer.

La recherche et la navigation dans les icônes sont transparentes et incluent diverses catégories si vous préférez naviguer manuellement plutôt que rechercher des mots-clés.

Cliquer sur n’importe quelle icône fait apparaître une interface intuitive qui permet diverses modifications et les applique même au code – contrairement aux React Icons, où vous devrez le faire manuellement.

Dans l’ensemble, Font Awesome n’est pas seulement une excellente bibliothèque d’icônes React, mais l’une des meilleures bibliothèques d’icônes pouvant accueillir des développeurs d’horizons divers ainsi que des concepteurs. Si React Icons ne vous convient pas, un forfait payant pour Font Awesome pourrait le faire. Avant d’acheter, vous pouvez inscrivez-vous au forfait gratuit pour voir si la mise à niveau améliorerait votre expérience.

3. IconPark

IconPark est une bibliothèque d’icônes open source proposant plus de 2 500 icônes personnalisables pour les ingénieurs et les concepteurs. Ses icônes ont un design unique mais moderne et permettent des scénarios d’utilisation flexibles.

Il prend en charge l’intégration transparente de React et Vue ainsi que la prise en charge de SVG si vous souhaitez le faire de cette façon. Apporter des modifications sur IconPark est assez simple, même pour un développeur, comme le montre l’image ci-dessus. Toutes les modifications sont reflétées dans un code copiable prêt à être implémenté dans votre projet.

Actuellement, il contient près de 8 000 étoiles GitHub, mais seulement 3 000 téléchargements npm hebdomadaires pour le moment. Si vous souhaitez essayer, un guide détaillé pour l’installer est répertorié dans son Documentation.

4. Icônes CoreUI React

CoreUI est connu pour ses modèles de tableaux de bord d’administration open source, mais il propose également un Bibliothèque d’icônes React composé désormais de plus de 1 500 icônes. Bien qu’il ne propose pas de codes copiables prêts à l’emploi, vous voudrez peut-être l’essayer si vous créez des tableaux de bord d’administration.

L’un des points forts de ce package est l’accent mis sur l’accessibilité pour les personnes ayant une déficience visuelle. Il suggère une approche pour diviser les icônes en icônes sémantiques et icônes décoratives et inclure une ligne de code qui signale aux lecteurs d’écran de l’ignorer ou non. Plus de détails sur cette implémentation ainsi que sur l’installation complète du package peuvent être trouvés dans son Documentation.

5. Icônes du segment Evergreen

Evergreen Segment est un framework d’interface utilisateur React composé de nombreux composants React qui fonctionnent immédiatement. L’un de ces composants est son icônes conçues sur mesure. Evergreen Segment propose plus de 500 icônes avec un style unique qui peut répondre à vos besoins.

Bien qu’il n’inclue pas d’icônes de marque, ses icônes pour les fonctionnalités de base ne doivent pas être écartées. Il tient actuellement 12 000 étoiles GitHub, mais ils le sont principalement grâce au succès de son framework parent. Cela dit, le package npm pour ses icônes tient le coup 10 000 téléchargements hebdomadaires à partir de maintenant et va probablement augmenter à partir d’ici.

Les instructions d’installation et d’utilisation peuvent être trouvées dans son Documentation. Fait intéressant, il comprend également un éditeur en direct sur des exemples, afin que vous puissiez voir l’effet de l’application d’accessoires aux icônes.

Conclusion

Étant donné que React Icons comprend de nombreuses bibliothèques d’icônes React populaires, est activement maintenu et est facile à utiliser, ce serait probablement le meilleur choix pour vous en tant que développeur React. Son vaste arsenal de jeux d’icônes est suffisant pour répondre à tous les cas d’utilisation dont vous pourriez avoir besoin.

Mais si vous n’en êtes pas fan, Material Icons ou Font Awesome de MUI sont d’excellentes bibliothèques d’icônes complètes. Les bibliothèques pour Icon Park, CoreUI et Evergreen Segment peuvent vous aider dans des cas de niche où vos bibliothèques standard ne fonctionnent pas.

Néanmoins, les bibliothèques d’icônes React open source sont une bénédiction et une amélioration considérable par rapport aux implémentations précédentes – où vous deviez télécharger un grand nombre d’icônes, payer pour de nombreuses bibliothèques, pour ne pas trouver l’icône dont vous avez besoin.