React Icons: So verwendest du Icons in React

React Icons: So verwendest du Icons in React (Pakete, SVG, Sprites) | We.Inc

So fügst du Icons in React ein: lucide-react, react-icons, Inline-SVG oder Sprites im Vergleich, gemessene Bundle-Größen, Größe über currentColor, Barrierefreiheit und Einrichtung in Next.js.

React Icons: So verwendest du Icons in React

Installiere ein Icon-Paket wie lucide-react oder react-icons und importiere jedes Icon über seinen Namen, zum Beispiel import { Camera } from "lucide-react". Benannte Importe sind tree-shakebar, daher landen nur die Icons im Bundle, die du verwendest. Lege die Größe über Props oder 1em fest, färbe Icons über currentColor ein und verstecke dekorative Icons mit aria-hidden.

Schnelle Empfehlungen

Wenn du willst
Verwende

Ein sauberes, einheitliches Set

Icons aus vielen Sets

Zwei oder drei eigene Icons
Eine Inline-SVG-Komponente

Dieselben Icons sehr oft wiederholt
Ein SVG-Sprite mit <use>

In diesem Guide geht es darum, Icons in React-Code einzubinden. Welche kostenlosen Icon-Sets du wählen solltest und welche Lizenzen sie haben, steht in unserer Liste der besten kostenlosen Icon-Bibliotheken. Die Größenangaben hier stammen aus unseren eigenen Builds, Tool und Einstellungen sind jeweils angegeben.

Wähle einen Ansatz aus der Vergleichstabelle.
Installiere das Paket oder füge das SVG in eine Komponente oder ein Sprite ein.
Importiere jedes Icon über seinen Namen; importiere nie das ganze Paket als Namespace.
Lege die Größe über eine Prop oder 1em fest und die Farbe über die Textfarbe des Elternelements.
Füge dekorativen Icons aria-hidden hinzu und Buttons, die nur aus einem Icon bestehen, ein Label.

Wähle nach Möglichkeit ein Icon-Set pro Produkt. Unterschiedliche Strichstärken wirken nebeneinander unordentlich.
Gib Icons width und height (oder eine size-Prop), damit sie nicht in voller Größe aufblitzen, bevor das CSS geladen ist.
Prüfe nach dem Hinzufügen von Icons die Bundle-Größe mit dem Analyzer deines Bundlers; ein einziger Wildcard-Import kann Hunderte Kilobyte hinzufügen.
Setze bei Buttons, die nur ein Icon enthalten, das Label auf den Button und nicht auf das svg, damit Screenreader einen benannten Button ansagen.

Häufige Fragen

Ist lucide-react oder react-icons kleiner?

In unserem Test waren beide bei einem einzelnen benannten Import klein: 874 Bytes gzipped für ein lucide-react-Icon und etwa 1.3 KB für ein react-icons-Icon, weil react-icons einen kleinen gemeinsamen Wrapper hinzufügt. Bei beiden wächst die Größe pro weiterem Icon nur um wenige hundert Bytes.

Wie ändere ich die Farbe eines Icons in React?

Die meisten React-Icon-Komponenten zeichnen mit currentColor, setze also die CSS-Eigenschaft color auf dem Icon oder seinem Elternelement, zum Beispiel mit einer Textfarben-Klasse. lucide-react und react-icons akzeptieren außerdem eine color-Prop.

Brauchen Icons Alt-Text?

Nur wenn das Icon als Einziges eine Bedeutung vermittelt. Dann gibst du ihm role="img" und ein aria-label oder beschriftest den Button, der es enthält. Icons neben sichtbarem Text sollten mit aria-hidden="true" versteckt werden.

Funktionieren Icon-Komponenten in Next.js Server Components?

Ja. Die Komponenten von lucide-react und react-icons sind zustandslose SVGs und werden auf dem Server gerendert. "use client" brauchst du nur in einer Komponente, die State oder Event-Handler nutzt.

Wann ist ein SVG-Sprite besser als ein Paket?

Wenn dieselben Icons sehr oft vorkommen oder auf Seiten, die nicht mit React gebaut sind. Jedes <use> ist ein kurzer Verweis auf eine einzige gecachte Datei, statt die kompletten Pfaddaten im HTML zu wiederholen.

Warum Importe wichtig sind

Beide Pakete legen jedes Icon in ein eigenes Modul, sodass ein Bundler alles weglassen kann, was du nicht importiert hast. Das funktioniert nur mit benannten Importen. Ein Namespace-Import von lucide-react ergab in unserem Test 137 KB gzipped, gegenüber weniger als 1 KB für ein einzelnes Icon.
Manche älteren Setups, etwa Jest oder ein Bundler ohne Unterstützung für ES-Module, laden womöglich trotzdem eine komplette Familiendatei. Wenn ein Build langsam oder groß ist, prüfe, zu welcher Datei der Icon-Import aufgelöst wird.

Häufige Fehler

fill auf ein Outline-Icon setzen. Outline-Sets zeichnen mit stroke, daher erscheint eine Füllfarbe als massiver Klecks.
Buttons, die nur aus einem Icon bestehen, ohne Namen lassen, sodass Screenreader nur "Button" ansagen.
In CSS eine Breite ohne Höhe für ein svg ohne viewBox setzen, wodurch es verzerrt wird.
Ein externes Sprite von einem CDN auf einer anderen Domain laden. Browser blockieren <use>-Verweise über Origins hinweg.

Pakete, Inline-SVG oder ein Sprite

Vier Wege, Icons in eine React-App zu bringen

Ansatz
Installation
Tree-Shaking
Ideal für

npm i lucide-react
Ja, ein Modul pro Icon
Ein einziges, einheitliches Outline-Set

npm i react-icons
Ja, mit einem modernen Bundler; aus einem Familienpfad importieren
Icons aus vielen Sets mischen

Inline-SVG-Komponente
Nichts; füge das SVG in eine Komponente ein
Nur das, was du schreibst
Eine Handvoll eigener Icons oder Marken-Icons

SVG-Sprite + <use href>
Eine Sprite-Datei, die du auslieferst
Nicht nötig; der Browser lädt eine Datei
Viele Icons, die sich auf einer Seite wiederholen, oder Seiten ohne React

Jeden Ansatz verwenden

Jedes Icon ist ein benannter Export. size, color und strokeWidth sind Props, und jede andere Prop wird an das svg weitergereicht.

Importiere aus dem eigenen Pfad der Familie (fa, md, lu, fi und so weiter). IconContext.Provider legt Standardwerte für alle Icons darin fest.

Deine eigene SVG-Komponente

Füge die Pfaddaten einmal ein und verwende sie wie jede andere Komponente. width und height von 1em sorgen dafür, dass sie der Schriftgröße folgt.

Tree-Shaking und Bundle-Größe

Wir haben Importe einzelner Icons mit esbuild im Produktionsmodus gebündelt und das Ergebnis mit gzip komprimiert. Benannte Importe aus beiden Paketen bleiben klein; ein Namespace-Import zieht das ganze Set herein. React selbst ist nicht mitgezählt.

Gemessene zusätzliche Größe durch Icon-Importe (minifiziert, dann gzip -9; React nicht mitgezählt)

Import
Minifiziert
Gzipped

Inline-SVG-Komponente (ein Kamera-Icon)

lucide-react 0.462: 1 Icon (Camera)

lucide-react 0.462: 5 Icons

react-icons 5.7: 1 Icon aus react-icons/fa

react-icons 5.7: 1 Icon aus react-icons/lu

lucide-react 0.462: import * (alle Icons)

SVG-Sprites

Ein SVG-Sprite mit <use href>

Definiere jedes Icon einmal als <symbol> und zeichne es dann überall mit <use>. Ändere die Farbe am Wrapper, und beide Icons folgen, weil die Pfade currentColor verwenden.

Eine Sprite-Datei aus React verwenden

Liefere die Symbole als /icons.svg aus und verweise jedes Icon auf eine id darin. Der Browser lädt die Datei einmal herunter und cacht sie. Ein externes Sprite muss auf demselben Origin liegen.

Größe, Farbe und Barrierefreiheit

Größe und Farbe mit currentColor

Icons mit currentColor übernehmen die Textfarbe ihres Elternelements, daher brauchen Hover- und Dark-Mode-Styles kein eigenes Icon-CSS. Ändere den color-Wert und sieh zu, wie beide Icons folgen.

Dekorative und bedeutungstragende Icons

Ein Icon neben sichtbarem Text ist Dekoration: Verstecke es. Ein Icon, das der einzige Inhalt eines Buttons ist, braucht einen Namen auf dem Button.

Hinweise zu Next.js

Next.js App Router

Die Komponenten von lucide-react und react-icons rendern problemlos in Server Components, weil sie einfache SVGs ohne State sind. Nur die Komponente, die einen Klick verarbeitet, braucht "use client".

Next.js: optimizePackageImports

Next.js optimiert Importe bereits für eine Liste gängiger Icon-Pakete, darunter lucide-react und react-icons. Füge hier jedes weitere Icon-Paket hinzu, das du nutzt, damit Dev-Builds schnell bleiben.

React Icons: So verwendest du Icons in React