Zum Inhalt springen
SvgJsx
Sprache: Deutsch

SVG zu TSX: typisierte React-Icon-Komponenten

Erzeuge TypeScript-React-Komponenten aus SVG mit korrekten Prop-Typen, damit jedes Icon className, aria-Attribute und Event-Handler mit vollständiger Autovervollständigung akzeptiert.

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

const HeartIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" 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: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

Vorschau

Vorschau des konvertierten SVG
Original-SVG
706 B
Optimiertes SVG
538 B(-24 %)
Komponente
631 B

So funktionieren die erzeugten Typen

Die Props der Komponente sind als SVGProps<SVGSVGElement> typisiert – derselbe Typ, den React für das <svg>-Element verwendet. Dadurch bekommst du Autovervollständigung für alle SVG-Attribute und Event-Handler, und TypeScript lehnt ungültige Props schon beim Kompilieren ab.

Mit aktivierter size-Option werden die Props zu SVGProps<SVGSVGElement> & { size?: number | string }, und width sowie height werden aus size gesetzt. Mit forwardRef ist die Ref als Ref<SVGSVGElement> typisiert, sodass Elternkomponenten Refs für Messungen oder Animationsbibliotheken anhängen können.

Checkliste für die TSX-Ausgabe

Bevor du ein erzeugtes Icon committest, prüfe, dass:

  • der Komponentenname in PascalCase ist und zum Dateinamen passt (ArrowLeft.tsx),
  • SVGProps und Ref nur als Typen importiert werden und damit aus dem JavaScript-Bundle verschwinden,
  • die viewBox vorhanden ist – ohne sie kann das Icon nicht skalieren,
  • benannte Exporte verwendet werden, falls deine Codebasis Default-Exporte verbietet.

Strict-Mode-tauglich

Der Code kompiliert mit "strict": true und mit isolatedModules, wie es Next.js, Vite und esbuild verlangen. Es werden keine any-Typen erzeugt, und der Standardwert für size steht als Literal direkt im Destructuring-Muster.

Häufige Fragen

Soll ich SVGProps oder ComponentProps<"svg"> verwenden?

Beide beschreiben dieselben Attribute. SVGProps<SVGSVGElement> benennt den Elementtyp explizit und wird in Reacts eigenen Typdefinitionen für <svg> verwendet, deshalb nutzt der Konverter diesen Typ.

Spielt forwardRef in React 19 noch eine Rolle?

In React 19 können Funktionskomponenten ref als normale Prop empfangen, daher ist forwardRef dort optional. Für Bibliotheken, die noch React 18 unterstützen müssen, bleibt es nützlich – deshalb ist es eine Option und standardmäßig aus.

Warum ist die size-Prop als number | string typisiert?

Zahlen werden zu Pixelwerten, während Strings CSS-Einheiten wie "1em" oder "1.5rem" erlauben, damit das Icon mit dem umgebenden Text skaliert.

Kann ich einen ganzen Icon-Ordner in TSX umwandeln?

Ja. Ziehe alle Dateien auf einmal hinein; jede wird zu einer .tsx-Datei mit dem Namen des SVG, gebündelt in einem ZIP mit einer index.ts-Barrel-Datei.