react icons
v5.3.0
Integrieren Sie beliebte Symbole ganz einfach in Ihre React-Projekte mit react-icons , das ES6-Importe nutzt, die es Ihnen ermöglichen, nur die Symbole einzuschließen, die Ihr Projekt verwendet.
yarn add react-icons
# or
npm install react-icons --saveBeispielverwendung
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} Weitere Anwendungsbeispiele und die Verwendung von Symbolen aus anderen Paketen finden Sie in der Dokumentation. HINWEIS : Jedes Icon-Paket hat seinen eigenen Unterordner unter react-icons aus denen Sie importieren.
Um beispielsweise ein Symbol aus Material Design zu verwenden, wäre Ihr Import: import { ICON_NAME } from 'react-icons/md';
Hinweis Für diese Option gab es seit einiger Zeit keine neue Version. Weitere Informationen #593
Wenn Ihr Projekt größer wird, steht Ihnen diese Option zur Verfügung. Diese Methode hat den Nachteil, dass die Installation des Pakets sehr lange dauert.
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --saveBeispielverwendung
import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} | Symbolbibliothek | Lizenz | Version | Zählen |
|---|---|---|---|
| Circum-Symbole | MPL-2.0-Lizenz | 1.0.0 | 288 |
| Schriftart Awesome 5 | CC BY 4.0-Lizenz | 5.15.4-3-gafecf2a | 1612 |
| Schriftart Awesome 6 | CC BY 4.0-Lizenz | 6.5.2 | 2045 |
| Ionicons 4 | MIT | 4.6.3 | 696 |
| Ionicons 5 | MIT | 5.5.4 | 1332 |
| Materialdesign-Ikonen | Apache-Lizenzversion 2.0 | 4.0.0-98-g9beae745bb | 4341 |
| Typicons | CC BY-SA 3.0 | 2.1.2 | 336 |
| Github Octicons-Symbole | MIT | 18.3.0 | 264 |
| Feder | MIT | 4.29.1 | 287 |
| Lucide | ISC | v5.1.0-6-g438f572e | 1215 |
| Spielsymbole | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| Wettersymbole | SIL OFL 1.1 | 2.0.12 | 219 |
| Geräte | MIT | 1.8.0 | 192 |
| Ameisen-Design-Ikonen | MIT | 4.4.2 | 831 |
| Bootstrap-Symbole | MIT | 1.11.3 | 2716 |
| Remix-Symbol | Apache-Lizenzversion 2.0 | 4.2.0 | 2860 |
| Flache Farbsymbole | MIT | 1.0.2 | 329 |
| Tüllen-Icons | Apache-Lizenzversion 2.0 | 4.12.1 | 635 |
| Heroicons | MIT | 1.0.6 | 460 |
| Heroicons 2 | MIT | 2.1.3 | 888 |
| Einfache Symbole | CC0 1.0 Universell | 12.14.0 | 3209 |
| Einfache Liniensymbole | MIT | 2.5.5 | 189 |
| IcoMoon kostenlos | CC BY 4.0-Lizenz | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
| BoxIcons | MIT | 2.1.4 | 1634 |
| css.gg | MIT | 2.1.1 | 704 |
| VS-Code-Symbole | CC BY 4.0 | 0,0,35 | 461 |
| Tabler-Symbole | MIT | 3.2.0 | 5237 |
| Themify-Symbole | MIT | v0.1.2-2-g9600186 | 352 |
| Radix-Symbole | MIT | @radix-ui/[email protected] | 318 |
| Phosphor-Symbole | MIT | 2.1.1 | 9072 |
| Icons8 Line Fantastisch | MIT | 1.3.1 | 1544 |
Sie können weitere Symbole hinzufügen, indem Sie Pull-Anfragen senden oder Probleme erstellen.
Sie können React-Icons-Requisiten mithilfe der React Context API konfigurieren.
Erfordert React 16.3 oder höher.
import { IconContext } from "react-icons" ;
< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
< div >
< FaFolder / >
< / div >
< / IconContext . Provider > ;| Schlüssel | Standard | Notizen |
|---|---|---|
color | undefined (erben) | |
size | 1em | |
className | undefined | |
style | undefined | Kann Größe und Farbe überschreiben |
attr | undefined | Durch andere Attribute überschrieben |
title | undefined | Symbolbeschreibung für Barrierefreiheit |
Der Importpfad hat sich geändert. Sie müssen den alten Stil umschreiben.
// 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 >
) ;
}Am Ende haben Sie ein großes JS-Bundle? Schauen Sie sich dieses Problem an.
Ab Version 3 wird vertical-align: middle nicht automatisch angegeben. Bitte verwenden Sie IconContext, um den Klassennamen anzugeben, oder geben Sie einen Inline-Stil an.
< IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } > className StylingKomponente
< IconContext . Provider value = { { className : 'react-icons' } } >CSS
. react-icons {
vertical-align : middle;
} Abhängigkeiten von @types/react-icons können gelöscht werden.
yarn remove @types/react-iconsnpm remove @types/react-icons ./build-script.sh erstellt das gesamte Projekt. Weitere Informationen finden Sie auch unter CI-Skripte.
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn buildSchauen Sie sich zunächst die Diskussion an, um zu sehen, ob jemand einen Icon-Satz hinzufügen möchte.
https://github.com/react-icons/react-icons/discussions/categories/new-icon-set
In dieser Datei werden die abzurufenden SVG-Dateien verwaltet. Bearbeiten Sie diese Datei und führen Sie yarn fetch && yarn check && yarn build aus.
https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
Hinweis: Das Projekt akzeptiert derzeit keine aktive PR für die Vorschau-Site.
Die Vorschauseite ist die in Astro+React erstellte react-icons Website.
cd packages/react-icons
yarn fetch
yarn build
cd ../preview-astro
yarn start Bei der Demo handelt es sich um ein Boilerplate zum Erstellen einer React-App mit hinzugefügten react-icons als Abhängigkeit zum einfachen Testen.
cd packages/react-icons
yarn fetch
yarn build
cd ../demo
yarn start SVG wird von allen gängigen Browsern unterstützt. Mit react-icons können Sie den Benutzern statt einer großen Schriftartendatei nur die benötigten Symbole bereitstellen und so leichter erkennen, welche Symbole in Ihrem Projekt verwendet werden.
MIT
