Wie funktioniert ...props-Forwarding?

Die Komponente nimmt `{ size, color, ...props }` und spreadet `{...props}` auf das SVG-Element. Damit kannst du **jedes DOM-Attribut übergeben**: ` `. Ohne Forwarding würden Props stillschweigend verschwinden - du müsstest die Komponente jedes Mal anfassen.

Warum muss der Komponenten-Name PascalCase sein?

JSX **entscheidet anhand des ersten Buchstabens, was ein Tag ist**: lowercase = HTML-Element (` `, ` `), uppercase = React-Komponente (` `). Nennst du deine Komponente `iconCheck` (lowercase), denkt JSX, das ist **ein HTML-Tag "iconcheck"** und rendert nichts. PascalCase ist **per Konvention Pflicht**.

Was, wenn das SVG mehrere Farben hat (z. B. eine Illustration)?

Das Tool **extrahiert nur die erste oder dominante Farbe** als Prop. Der Rest bleibt inline in der Komponente. Du kannst dann manuell mehr Props ergänzen (z. B. `accentColor`, `backgroundColor`) und Werte substituieren. Oder "Extract color" abschalten und alles so lassen.

Default-Export oder Named-Export?

**Named-Export** (`export const IconCheck`) ist **in Libraries verbreiteter** - einfacher mehrere Icons importieren: `import { IconCheck, IconClose } from "./icons"`. **Default-Export** (`export default function`) ist praktisch, wenn die Datei **eine einzelne Komponente** hat. Für eine Icon-Library **bevorzug Named**, für Single-Purpose-Komponenten **Default reicht**.

Was ist React.FC vs eine nackte Funktion?

`React.FC ` ist der **funktionale Komponenten-Typ**. Älterer Typing-Ansatz, **etwas umstritten** (Default-`children` im Typ, manche Patterns funktionieren anders). Moderner Code **nutzt eine nackte Funktion** mit strikten Prop-Typen: `const IconCheck = ({size, color}: IconProps) => ...`. Klarer. Das Tool bietet beide Varianten - **nimm die nackte Funktion**, außer dein Projekt hat die andere Konvention.

Kann ich die generierte Komponente in Next.js nutzen?

Ja. **Sie funktioniert als Server-Component oder Client-Component**. Hat die Komponente keinen State und keine Events, **kann sie eine Server-Component sein** (besser für SEO). Schaltest du `onClick` außen, **muss der Wrapper Client-Component sein**, aber das Icon nicht. Datei in `components/icons/` droppen und wie üblich importieren.

Was, wenn das SVG keine viewBox hat?

**Ohne `viewBox` skaliert SVG nicht**. Die Komponente rendert trotz `size`-Prop in fester Größe. Fix: manuell eine viewBox ins SVG vor dem Konvertieren ergänzen oder die generierte Komponente editieren. Der `viewBox`-Wert ist "min-x min-y width height" - für ein typisches 24x24-Icon ist es `"0 0 24 24"`. Der SVG-Optimierer markiert eine fehlende viewBox.

Kann ich className übergeben?

Ja - wenn du **Forward ...props** anlässt, kannst du `className`, `style`, jede DOM-Prop übergeben. Beispiel: ` ` - die Farbe wird via Tailwind statt der `color`-Prop gesetzt. Denk dran, `currentColor` im SVG liest das CSS-`color`, also funktioniert `text-green-500` (also `color: green`).

Was macht "extract size"?

Es ersetzt hardcoded `width="24"` und `height="24"` mit Prop-getriebenen Werten: `width={size} height={size}`. Lässt dich dieselbe Komponente in verschiedenen Größen rendern: ` ` oder ` `. Ohne ist die **Größe fest** im SVG, und du musst sie via CSS überschreiben. Default ist 24 (Standard-Icon-Größe).

SVG zu React-Component - kostenlos

Warum SVG zu einer React-Komponente konvertieren?

Rohes SVG in einer React-App hat ein paar Marotten: `class` muss `className` sein, Bindestrich-Attribute (`stroke-width`) werden camelCase, Farbe ist im SVG hardcoded. Willst du dasselbe Icon in einer anderen Farbe rendern, brauchst du eine zweite Datei. Andere Größe? Noch eine Datei oder ein CSS-Override.

Eine React-Komponente mit Props löst das sauber: `<IconCheck size={20} color="red" />`. Eine Datei, jede Farbe, jede Größe. Plus `...props`-Forwarding - `aria-label` oder `onClick` reinwerfen, ohne die Komponente zu ändern.

SVG pasten (Figma, Iconify, eigene Grafik), Optionen wählen (TypeScript vs JSX, Named vs Default-Export, ob du eine `color`/`size`-Prop willst) und eine fertige Komponente bekommen. Als `.tsx` mit korrektem Dateinamen runterladen oder ins Clipboard kopieren.

So nutzt du das Tool

SVG-Code ins linke Panel pasten. Kann ein Icon (24x24), ein Logo, eine Illustration sein - jedes SVG.
Einen Komponenten-Namen eintragen (PascalCase, z. B. `IconCheck`, `LogoBrand`).
Optionen toggeln: TypeScript für typisierte Version, Default-Export oder Named.
Rechts kriegst du die fertige Komponente. Drunter eine Live-Vorschau mit aktueller Größe und Farbe.
"Copy" drücken zum Kopieren oder "Download .tsx", um das File mit dem richtigen Namen zu speichern.

Wann das hilft

Praktische Anwendungsfälle:

Icon-Library im Projekt. Der Designer exportiert 30 Icons aus Figma, du konvertierst jedes und endest mit `components/icons/` voller `.tsx`-Files. Jedes Icon hat size/color-Props und ist Theme-aware.
Firmen-Logo. Aus Illustrator exportieren, konvertieren, du kriegst `<LogoBrand size={32} />` für Header, Footer, Social-Embeds.
Status-Icons. `<IconSuccess color="green" />`, `<IconError color="red" />` - eine Datei, verschiedene Farben pro Status.
Custom-Hero-Illustrationen. Eine SVG-Illustration in der Hero-Section - jetzt eine Komponente mit editierbaren Akzentfarben.
Ersatz für lucide-react / heroicons. Manchmal brauchst du ein Icon, das keine Library shippt. Konvertier dein eigenes.
Build-time SVG. In Next.js schlägt eine Komponente `<Image src="/icon.svg" />` - weniger Requests, besseres SSR.
Prop-Forwarding. `<IconClose onClick={handleClose} aria-label="Close modal" />` - Accessibility und Interaktion in einem.

Zuerst dein SVG schrumpfen mit dem SVG-Optimierer. Für HTML zu JSX schau den HTML-zu-JSX-Konverter.

Häufig gefragt

`currentColor` ist ein spezieller CSS-Wert, der heißt "nimm den Wert des Eltern-`color`". Also ist ein Icon in `<div style={{color: "red"}}><IconCheck /></div>` rot. Das ist der beste Default, weil das Icon Styling erbt, mit Hover funktioniert (`text-blue-500 hover:text-blue-700`), mit Theming funktioniert. Willst du eine feste Farbe, gib sie explizit: `<IconCheck color="#3b82f6" />`.

SVG zu React-Component

SVG zu React-Komponente

Warum SVG zu einer React-Komponente konvertieren?

So nutzt du das Tool

Wann das hilft

Häufig gefragt

Passende Tools

SVG-Optimierer

HTML zu JSX Konverter

Favicon-Generator (komplettes Pack)