Zum Inhalt springen
SvgJsx
Sprache: Deutsch

So verwendest du SVG-Icons in React

Es gibt fünf gängige Wege, SVG-Icons in eine React-App einzubinden. Dieser Leitfaden vergleicht sie hinsichtlich Performance, Styling und Barrierefreiheit und zeigt, wann welcher Weg passt.

Schnellvorlagen:
.svg-Dateien hierher ziehen oderDateien werden lokal mit FileReader gelesen und niemals hochgeladen.
Optionen
Export:
import type { SVGProps } from "react";

const HeartIcon = ({ size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: number | string }) => (
  <svg viewBox="0 0 24 24" className="icon icon-heart" width={size} height={size} {...props}>
    <g id="Layer_1" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "currentColor" }} />
    </g>
  </svg>
);

export default HeartIcon;

Vorschau

Vorschau des konvertierten SVG
Original-SVG
706 B
Optimiertes SVG
548 B(-22 %)
Komponente
692 B

1. Inline-SVG-Komponenten

Jedes Icon in eine Komponente umzuwandeln (genau das automatisiert diese Seite) gibt dir volle Kontrolle: Icons übernehmen Farben per currentColor, akzeptieren Props wie size und className und lassen sich mit CSS oder einer Motion-Bibliothek animieren. Bundler entfernen ungenutzte Komponenten per Tree Shaking, sodass nur importierte Icons ausgeliefert werden.

Der Nachteil: Das Markup wird Teil deines JavaScript-Bundles. Bei ein paar Dutzend kleinen Icons ist das vernachlässigbar, bei Hunderten komplexer Illustrationen nicht.

2. img-Tags und CSS-Hintergründe

<img src="/logo.svg" alt="Firma"> ist die einfachste Variante, und der Browser kann die Datei cachen. Das SVG ist jedoch von deinem CSS isoliert, sodass du die Farbe weder beim Hover noch im Dark Mode ändern kannst. Nutze das für Logos und Illustrationen, die sich nie ändern.

3. SVGR und Build-Zeit-Loader

SVGR (über @svgr/webpack oder vite-plugin-svgr) wandelt .svg-Imports beim Build in Komponenten um. Das ist bequem für große Icon-Ordner, erfordert aber zusätzliche Build-Konfiguration und kann sich zwischen Bundlern und Turbopack unterschiedlich verhalten. Eine einmalige Umwandlung mit diesem Tool liefert die gleiche Art Komponente als eingecheckten Quellcode.

4. SVG-Sprites und 5. Icon-Bibliotheken

Ein Sprite bündelt viele <symbol>-Elemente in einer Datei und referenziert sie mit <use href="#icon">. Das hält das HTML schlank, erschwert aber serverseitiges Rendering. Icon-Bibliotheken wie Lucide, Heroicons oder Phosphor liefern fertige Komponenten und sind ideal, wenn ihr Stil zu deinem Design passt.

Egal welche Methode du wählst – beachte diese Regeln zur Barrierefreiheit:

  • Dekorative Icons neben Text erhalten aria-hidden="true".
  • Alleinstehende Icons, etwa ein reiner Icon-Button, brauchen einen zugänglichen Namen per aria-label am Button oder einen <title> im SVG.
  • Behalte eine viewBox und gib Icon-Größen in em oder rem an, damit sie mit der Schriftgröße der Nutzer skalieren.
  • Sorge bei bedeutungstragenden Icons für ein Kontrastverhältnis von mindestens 3:1 (WCAG 1.4.11).

Häufige Fragen

Wie nutzt man SVG-Icons in React am besten?

Für UI-Icons sind Inline-Komponenten mit currentColor und einer size-Prop am flexibelsten. Verwende <img> für statische Grafiken und eine Icon-Bibliothek, wenn deren Stil zu deinem Design passt.

Verschlechtern Inline-SVG-Icons die Performance?

Selten. Ein typisches 24×24-Icon ist nach der Optimierung 300–600 Byte groß. Probleme treten erst auf, wenn Hunderte komplexe Icons gleichzeitig gerendert werden – dann sind Sprites oder <img> besser.

Soll ich SVGR nutzen oder Icons manuell konvertieren?

SVGR passt zu großen, häufig wechselnden Icon-Sets mit stabiler Build-Pipeline. Vorab konvertierte Komponenten brauchen keine Konfiguration und verhalten sich in jedem Bundler gleich.

Wie mache ich SVG-Icons barrierefrei?

Blende dekorative Icons mit aria-hidden="true" aus und gib bedeutungstragenden Icons einen zugänglichen Namen per aria-label oder <title>. Verlasse dich nie allein auf ein Icon, um wichtige Informationen zu vermitteln.

Wie lege ich die Größe von SVG-Icons mit Tailwind fest?

Entferne feste width- und height-Werte, behalte die viewBox und nutze Klassen wie size-5 oder h-4 w-4. Alternativ aktivierst du die size-Prop und übergibst eine Zahl.