react icons
v5.3.0
Incluez facilement des icônes populaires dans vos projets React avec react-icons , qui utilise les importations ES6 qui vous permettent d'inclure uniquement les icônes que votre projet utilise.
yarn add react-icons
# or
npm install react-icons --saveexemple d'utilisation
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} Consultez la documentation pour d'autres exemples d'utilisation et comment utiliser les icônes d'autres packages. REMARQUE : chaque package Icon possède son propre sous-dossier sous react-icons à partir desquelles vous importez.
Par exemple, pour utiliser une icône de Material Design , votre importation serait : import { ICON_NAME } from 'react-icons/md';
Remarque Cette option n'a pas eu de nouvelle version depuis un certain temps. Plus d'infos #593
Si votre projet s'agrandit, cette option est disponible. Cette méthode présente l’inconvénient de prendre beaucoup de temps pour installer le package.
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --saveexemple d'utilisation
import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} | Bibliothèque d'icônes | Licence | Version | Compter |
|---|---|---|---|
| Icônes de circonférence | Licence MPL-2.0 | 1.0.0 | 288 |
| Police géniale 5 | Licence CC BY 4.0 | 5.15.4-3-gafecf2a | 1612 |
| Police géniale 6 | Licence CC BY 4.0 | 6.5.2 | 2045 |
| Ioniques 4 | MIT | 4.6.3 | 696 |
| Ioniques 5 | MIT | 5.5.4 | 1332 |
| Icônes de conception matérielle | Licence Apache version 2.0 | 4.0.0-98-g9beae745bb | 4341 |
| Icônes typiques | CC BY-SA 3.0 | 2.1.2 | 336 |
| Icônes Github Octicons | MIT | 18.3.0 | 264 |
| Plume | MIT | 4.29.1 | 287 |
| Lucide | ISC | v5.1.0-6-g438f572e | 1215 |
| Icônes de jeu | CC PAR 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| Icônes météo | SIL OFL 1.1 | 2.0.12 | 219 |
| Dévicons | MIT | 1.8.0 | 192 |
| Icônes de conception de fourmis | MIT | 4.4.2 | 831 |
| Icônes d'amorçage | MIT | 1.11.3 | 2716 |
| Icône de remix | Licence Apache version 2.0 | 4.2.0 | 2860 |
| Icônes de couleur plate | MIT | 1.0.2 | 329 |
| Icônes à œillets | Licence Apache version 2.0 | 4.12.1 | 635 |
| Héroïques | MIT | 1.0.6 | 460 |
| Héroïques 2 | MIT | 2.1.3 | 888 |
| Icônes simples | CC0 1.0 Universel | 12.14.0 | 3209 |
| Icônes de lignes simples | MIT | 2.5.5 | 189 |
| IcoMoon Gratuit | Licence CC BY 4.0 | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
| BoîteIcônes | MIT | 2.1.4 | 1634 |
| css.gg | MIT | 2.1.1 | 704 |
| Icônes de code VS | CC PAR 4.0 | 0.0.35 | 461 |
| Icônes de table | MIT | 3.2.0 | 5237 |
| Icônes Themify | MIT | v0.1.2-2-g9600186 | 352 |
| Icônes de base | MIT | @radix-ui/[email protected] | 318 |
| Icônes de phosphore | MIT | 2.1.1 | 9072 |
| Ligne Icons8 géniale | MIT | 1.3.1 | 1544 |
Vous pouvez ajouter plus d'icônes en soumettant des demandes d'extraction ou en créant des problèmes.
Vous pouvez configurer les accessoires de réaction-icons à l'aide de l'API React Context.
Nécessite React 16.3 ou supérieur.
import { IconContext } from "react-icons" ;
< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
< div >
< FaFolder / >
< / div >
< / IconContext . Provider > ;| Clé | Défaut | Remarques |
|---|---|---|
color | undefined (hériter) | |
size | 1em | |
className | undefined | |
style | undefined | Peut écraser la taille et la couleur |
attr | undefined | Écrasé par d'autres attributs |
title | undefined | Description de l'icône pour l'accessibilité |
Le chemin d'importation a changé. Vous devez réécrire à partir de l'ancien style.
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} // NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
}Vous vous retrouvez avec un gros bundle JS ? Consultez ce problème.
A partir de la version 3, vertical-align: middle n'est pas automatiquement donné. Veuillez utiliser IconContext pour spécifier className ou spécifier un style en ligne.
< IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } > className globalComposant
< IconContext . Provider value = { { className : 'react-icons' } } >CSS
. react-icons {
vertical-align : middle;
} Les dépendances sur @types/react-icons peuvent être supprimées.
yarn remove @types/react-iconsnpm remove @types/react-icons ./build-script.sh construira l'ensemble du projet. Voir également les scripts CI pour plus d'informations.
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn buildTout d’abord, consultez la discussion pour voir si quelqu’un souhaite ajouter un jeu d’icônes.
https://github.com/react-icons/react-icons/discussions/categories/new-icon-set
Les fichiers SVG à récupérer sont gérés dans ce fichier. Modifiez ce fichier et exécutez yarn fetch && yarn check && yarn build .
https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
Remarque Le projet n'accepte pas activement les relations publiques pour le site d'aperçu pour le moment.
Le site de prévisualisation est le site Web react-icons , construit dans Astro+React.
cd packages/react-icons
yarn fetch
yarn build
cd ../preview-astro
yarn start La démo est un passe-partout Create React App avec react-icons ajoutées en tant que dépendance pour des tests faciles.
cd packages/react-icons
yarn fetch
yarn build
cd ../demo
yarn start SVG est pris en charge par tous les principaux navigateurs. Avec react-icons , vous pouvez proposer aux utilisateurs uniquement les icônes nécessaires au lieu d'un gros fichier de polices, ce qui vous aide à reconnaître quelles icônes sont utilisées dans votre projet.
MIT
