SVG zu React/JSX Konverter

Der SVG zu React JSX Konverter verwandelt rohe SVG-Dateien in wiederverwendbare React-Komponenten. Er wurde für Entwickler entwickelt, die sauberere Icon-Komponenten, Markenlogos, Produktillustrationen und Assets für Design-Systeme benötigen, ohne jedes SVG-Attribut manuell korrigieren zu müssen. Fügen Sie SVG-Markup ein oder laden Sie eine UTF-8-kodierte .svg-Datei hoch, wählen Sie die benötigten React-Optionen und kopieren Sie die generierte Komponente direkt in Ihr Projekt.

Bedienungsanleitung

1. SVG einfügen oder hochladen. Fügen Sie eine vollständige SVG-Datei in den Editor ein oder laden Sie eine UTF-8-kodierte .svg-Datei hoch.
2. Komponente benennen. Geben Sie einen React-Komponentennamen im PascalCase-Format ein, wie z. B. AlertIcon oder BrandMark.
3. React-Optionen auswählen. Wählen Sie Optionen für TypeScript, forwardRef, React.memo, Titel-Barrierefreiheit, Style-Konvertierung, Bereinigung und Prop-Spreading aus.
4. In JSX konvertieren. Klicken Sie auf 'In React-Komponente konvertieren', um kopierbereiten JSX-Code zu generieren.
5. Überprüfen und kopieren. Überprüfen Sie die Konvertierungszusammenfassung, Warnungen und den generierten Code, bevor Sie ihn in Ihr React-Projekt kopieren.

Was der Konverter übernimmt

Tipps für bessere React-SVG-Komponenten

Behalten Sie die originale viewBox nach Möglichkeit immer bei, da sie steuert, wie das SVG skaliert wird. Für Icon-Systeme ermöglichen es die Attribute width="1em" und height="1em", dass das Icon die Textgröße erbt, während aufrufende Stellen die Abmessungen dennoch über Props überschreiben können. Verwenden Sie einen aussagekräftigen Komponentennamen im PascalCase-Format, halten Sie dekorative SVGs bei Bedarf mit aria-hidden barrierefrei und nutzen Sie die Titel-Prop für Icons mit Informationsgehalt, die eine Bedeutung vermitteln.

FAQ

Was ändert dieser SVG zu React JSX Konverter?

Er analysiert SVG-XML und schreibt SVG-Attribute in React-freundliches JSX um, einschließlich className, camelCase-formatierten SVG-Attributen, optionalen Style-Objekten, Props, forwardRef, Titel-Barrierefreiheit und Export-Syntax.

Kann ich eine SVG-Datei hochladen?

Ja. Sie können eine UTF-8-kodierte .svg-Datei hochladen oder SVG-Markup einfügen. Hochgeladene Dateien werden als Text gelesen und serverseitig in JSX konvertiert.

Wird der SVG-Code bereinigt?

Die Bereinigung ist standardmäßig aktiviert. Der Konverter entfernt Script-Tags, Inline-Event-Handler und javascript:-Links, sodass die generierte Komponente vor der Verwendung sicherer überprüft werden kann.

Warum werden Style-Attribute in Objekte konvertiert?

React erwartet, dass die Style-Prop beim Schreiben von JSX ein Objekt ist. Die Konvertierung von Style-Strings in Objekte sorgt dafür, dass der Output sauber kompiliert wird, und hält die CSS-Eigenschaftsnamen im camelCase-Format.

Was ist das beste Format für Komponentennamen?

Verwenden Sie PascalCase wie AlertIcon oder BrandMark. Der Konverter bereinigt ungültige Zeichen und stellt sicher, dass das Ergebnis mit einem gültigen Bezeichner für React-Komponenten beginnt.