SVG zu React: Von der Rohdatei zur produktionsreifen Komponente

Konvertieren Sie SVG-Icons in React/JSX-Komponenten, optimieren Sie sie und integrieren Sie sie in Ihr Design System.

21.07.2026

10 Min. Lektüre

Teilen Sie diesen Artikel:

SVG

react

jsx

frontend

components

Anleitung

Warum vom rohen SVG zur React-Komponente wechseln

Inline-SVG in JSX einzufügen scheitert oft beim ersten Build: HTML-Attribute (`class`, `stroke-width`) sind in React ungültig, eingebettete `<style>`-Tags sind schwer wartbar, Figma-Exporte blähen die Dateigröße auf. Der Online-Konverter SVG zu JSX wandelt eine `<svg>`-Datei in eine kopierfertige React-Komponente um — mit Attribut-Umbenennung (`className`, `strokeWidth`), anpassbarem Komponentennamen und optionaler TypeScript-Ausgabe. Der gesamte Workflow läuft im Browser im SVG-Tools-Hub, ohne Konto oder Server-Upload. Für Optimierungskontext siehe auch SVGO-Presets erklärt.

SVG → React-Funktionskomponente in einem Schritt

SVG-Attribute auf JSX-Syntax gemappt (className, fillRule…)

Optionen: Komponentenname, Default-Export, TypeScript

Zuerst mit optimize-svg optimieren, dann konvertieren

100 % lokale Verarbeitung — ideal für sensible Kundenassets

Beispiel: UI-Icon im Design System

Vorher / nachher im Repo

Ein 24×24-Icon aus Figma kann als rohes SVG 3–6 KB wiegen. Nach optimize default oft 1–2 KB. Generiertes JSX bleibt lesbar — nutzen Sie den <a href="/de/beautify-svg" class="text-primary hover:underline">Online-SVG-Beautifier</a> auf Zwischen-Markup, wenn Sie Pfade prüfen müssen.

Before optimization

File size:Quell-SVG ~4,8 KB

Load time:—

After optimization

File size:optimize ~1,9 KB · JSX-Komponente ~2,1 KB

Load time:—

Bundler-Auswirkung (kurzer Kontext)

Jede importierte Icon-Komponente landet im JavaScript-Chunk Ihrer App — anders als eine statische `.svg`-Datei. Das ist der übliche React-Trade-off; der <a href="/de/minify-js" class="text-primary hover:underline">Online-JavaScript-Minifier</a> illustriert JS-seitige Kompression, aber die erste Verteidigungslinie ist ein schlankes Quell-SVG vor der Konvertierung.

Best Practices: Props, className und Barrierefreiheit

Styling mit className und currentColor

Der Konverter mappt `class` → `className` und kebab-case SVG-Attribute auf React-camelCase. Für konsistentes Theming Quell-SVG oder JSX auf `fill="currentColor"` setzen und Farbe per CSS/Tailwind am Parent steuern.

`currentColor` statt fester Hex-Werte für UI-Icons

width/height → Utility-Klassen statt fester Pixel

Props spreaden: `<svg {...props} className={cn('h-5 w-5', props.className)}>`

Nicht auf internes `<style>` verlassen — von JSX ausgeschlossen

beautify-svg zum Lesen nach manuellen Edits

Barrierefreiheit: dekorativ vs. informativ

Ein Icon neben sichtbarem Text ist dekorativ → `aria-hidden="true"` auf `<svg>`. Ein Icon, das Bedeutung trägt (z. B. Fehlerstatus ohne Text), braucht `<title>` / `<desc>` oder explizites `aria-label`. FastMinify erhält title/desc beim Optimize; prüfen, dass sie die Konvertierung überstehen.

Dekorativ: `aria-hidden` + sichtbarer Text daneben

Informativ: title/desc oder aria-label auf der Komponente

validate-svg auf Quell-SVG vor jsx

Kommender Artikel: SVG-Barrierefreiheit (SVG-Hub)

viewBox nicht entfernen — nötig für responsives Skalieren

Häufige Fallstricke nach der Konvertierung

Ungültige Komponentennamen (`icon-arrow`) → stiller Fallback auf `SvgIcon` (Tool meldet Fallback). Ungültiges XML oder mehrere Roots → Parse-Fehler. Doppelte IDs, wenn dieselbe Komponente mehrfach ohne Sprite inlined wird.

Immer PascalCase für componentName

Einzelnes Root-`<svg>` pro Datei

Rendering auf der Zielseite testen, nicht nur Storybook

Quell-`.svg` und generiertes `.tsx` versionieren

Nach Design-Änderung neu konvertieren — JSX nicht von Hand patchen

Wann das Browser-Tool reicht

Häufige Szenarien

Kein SVGR nötig, um ein Icon aus Slack oder einen einmaligen Figma-Export zu konvertieren.

Icon-Komponente prototypen vor dem Repo-Eintrag

Front-end-Dev ohne Node-/CI-Zugang entblocken

Generiertes JSX mit bestehendem SVGR-Export vergleichen

Designer schulen, was in Produktion geht

One-Shot vor einem Design-System-PR

Grenzen: SVGR und Bundler-Plugins

Was der Browser nicht ersetzt

Online-Konvertierung eignet sich zum Erkunden und für wenige Komponenten. Automatischer `import Icon from './icon.svg'` bei jedem Build, Batch über einen `icons/`-Ordner und custom SVGR-Templates bleiben Domain von `@svgr/cli`, `@svgr/webpack` oder `vite-plugin-svgr`.

Hunderte Komponenten aus einem Asset-Ordner generieren

Custom Templates (memo, forwardRef, Index-Barrel)

Pre-Commit-Hook: svg → tsx bei jeder Änderung

Team-Config in svgr.config.js versioniert

Plugins außerhalb FastMinify-Optionen (inline svgo in SVGR)

Browser-Vorschau und Pipeline angleichen

Name, Export und JSX-Struktur in svg-to-jsx validieren, dann Konventionen in SVGR spiegeln. Mit dem gleichen SVGO-Preset wie in der CI optimieren — siehe <a href="/de/blog/svgo-presets-svg-web-optimieren" class="text-primary hover:underline">SVGO-Presets</a> und den <a href="/de/blog/svg-optimization-leitfaden-web" class="text-primary hover:underline">SVG-Optimierungsleitfaden</a>.

componentName und Export im Icons-README dokumentieren

Gleiches Optimize-Preset lokal und in CI

Snapshot-Tests für kritische Icons

Handgeschriebenes und SVGR-JSX nicht ohne Konvention mischen

SVG-Hub als Team-Tool-Referenz

SVGR und React-Ökosystem

Ergänzende Tools

FastMinify svg-to-jsx deckt Paste → JSX kopieren mit drei Optionen ab. Das npm-Ökosystem bietet mehr Flexibilität für Automatisierung.

@svgr/cli

SVGR-Kommandozeile — Referenz für Batch und CI.

Pros:

Gesamte Verzeichnisse batchweise

Templates und `.svgrrc`-Config

Native Pre-Commit-Integration

Cons:

Node-Installation nötig

Lernkurve Config/Plugins

vite-plugin-svgr / @svgr/webpack

SVG beim Kompilieren als React-Komponente importieren.

Pros:

Automatisch bei jedem Import

Konsistent mit Bundler-Workflow

Kein manueller Schritt für Entwickler

Cons:

Weniger sichtbar zum Vergleich des rohen JSX

Schwierigeres Conversion-Debug ohne Online-Tool

FastMinify optimize-svg + svg-to-jsx

Browser-Kette optimize → convert, ohne Installation.

Pros:

Privacy-local, null Config

Explizite componentName / TypeScript-Optionen

Perfekt für One-Shot und visuelle Prüfung

Cons:

Kein Batch über hunderte Dateien

Manuelle Anpassung für Props-Spread und erweiterte a11y

Inline-SVG, `<img>` oder React-Komponente?

Drei Wege, SVG anzuzeigen

Die Wahl beeinflusst Styling, Barrierefreiheit und JavaScript-Bundle-Größe. Eine React-Komponente passt zu wiederverwendbaren Icons in einem Design System; einmaliges Inline oder `<img src="icon.svg">` bleibt für einfache Fälle gültig.

Rohes Inline: schnell, aber Nicht-React-Attribute, schwer versionierbar

`<img>` / statisches Asset: kein `currentColor`, einfacher HTTP-Cache

React-Komponente: Props, Theming, Bundler-Tree-Shaking

`<symbol>`-Sprite: gut für Dutzende statischer Icons

Komponente + SVGO-Optimize: bestes Verhältnis Größe / Wartbarkeit

Wann sich eine React-Komponente lohnt

UI-Icons (Buttons, Navigation), thembare Logos (`fill="currentColor"`) oder Assets, die mehrere React/Next.js-Apps teilen. Die Komponente kapselt Markup und vermeidet 200 Zeilen `<path>` auf jeder Seite.

Design System mit Farb- / Größenvarianten

Animierte oder interaktive Icons (Hover via className)

Interne `@company/icons`-Bibliothek

Storybook für isolierte Vorschau

Figma-Export → optimize → svg-to-jsx → PR

Was die Konvertierung nicht ersetzt

svg-to-jsx erzeugt JSX aus vorhandenem Markup. Es löst keine Sass-`@use`-Imports, Multi-File-Partials oder automatische Generierung bei jedem Commit — dafür bleibt SVGR in der CI relevant. Das Online-Tool eignet sich zum Prototypen, Korrigieren eines Exports oder Onboarding von Designern.

Keine `@import`-Auflösung zwischen SVG-Dateien

Eingebettete `<style>`-Tags fehlen in der JSX-Ausgabe

Einzelnes Root-`<svg>`-Element erforderlich

Generierter `props`-Parameter wird nicht auf `<svg>` gemerged — manuelle Anpassung bei Bedarf

Mit validate-svg für title/desc vor dem Versand kombinieren

FastMinify-Workflow: optimize, dann svg-to-jsx

Schritt 1 — Quell-SVG bereinigen und optimieren

Ein Illustrator- oder Figma-Export enthält oft Metadaten und übermäßige Präzision. Zuerst den Online-SVGO-Optimierer (Safe- oder Default-Preset für UI-Icons) oder den SVG-Minifier für reines Whitespace-Cleanup. So schrumpft die finale Komponente ohne Änderung am React-Workflow.

optimize-svg: Presets safe / default / aggressive

minify-svg: nur Leerzeichen und Kommentare

beautify-svg: Markup vor Konvertierung lesen

title/desc für informative Icons behalten

Vorher/Nachher-Statistik im Tool vergleichen

Schritt 2 — Mit svg-to-jsx konvertieren

Optimiertes SVG in das SVG-zu-JSX-Tool einfügen. Komponentennamen wählen (muss mit Großbuchstabe beginnen — sonst Fallback `SvgIcon`), Default- vs. Named-Export und TypeScript, wenn Ihre Codebase `.tsx` nutzt.

componentName: z. B. `ChevronIcon`, `LogoMark`

exportDefault: `true` für Default-Import, `false` für Named Export

typescript: fügt `React.SVGProps` / `JSX.Element`-Annotationen hinzu

Einfügen oder Datei laden (Limit im Tool angezeigt)

JSX kopieren und ins Repo einfügen

Schritt 3 — Ins Design System integrieren

Nach dem Kopieren bei Bedarf anpassen: `props` auf `<svg>` mergen (`{...props}`), `aria-hidden` für dekorative Icons oder `role="img"` + `aria-label` für informative. Mit SVG online validieren auf Quell-Markup vor der Konvertierung prüfen.

Spread `{...props}` auf Root-`<svg>` für className/Größe

Festes fill durch `currentColor` für Theming ersetzen

Feste width/height → CSS-Sizing (`className="h-5 w-5"`)

Rendering in Storybook + visueller Snapshot testen

SVG-Hub für nächste Schritte (Data URI, Viewer…)

Fazit

Der sicherste Weg zu einer wartbaren React-Komponente: Quell-SVG optimieren, mit expliziten Optionen zu JSX konvertieren, dann Props und Barrierefreiheit im Design System anpassen. FastMinify verknüpft optimize-svg und svg-to-jsx vollständig im Browser — ideal zum Prototypen, bevor SVGR in der CI festgelegt wird.

SVG jetzt in React-Komponente umwandeln

Optimize (safe/default) vor svg-to-jsx bei Figma-Exporten

PascalCase für componentName — SvgIcon-Fallback vermeiden

Props und aria auf `<svg>` nach dem Kopieren mergen

validate-svg für informative Icons

SVGR in CI, sobald die Komponente im Browser validiert ist

Teilen Sie diesen Artikel

Teilen Sie diesen Artikel:

SVG zu React: Von der Rohdatei zur produktionsreifen Komponente

Warum vom rohen SVG zur React-Komponente wechseln

Beispiel: UI-Icon im Design System

Before optimization

After optimization

Best Practices: Props, className und Barrierefreiheit

Wann das Browser-Tool reicht

Grenzen: SVGR und Bundler-Plugins

SVGR und React-Ökosystem

@svgr/cli

Pros:

Cons:

vite-plugin-svgr / @svgr/webpack

Pros:

Cons:

FastMinify optimize-svg + svg-to-jsx

Pros:

Cons:

Inline-SVG, `<img>` oder React-Komponente?

FastMinify-Workflow: optimize, dann svg-to-jsx

Fazit

Verwandte Artikel