Seit 2010 · Über 2 Mio. Tool-Aufrufe pro Monat
Seit 2010
Zu Chrome hinzufügen

Mein Werkzeugkasten

Automatischer Modus

Noch keine Werkzeuge gespeichert.

Auf Premium-Version upgraden
Ähnliche Tools
Nächster Schritt
TypeScript Playground
Weitere Tools
SVG OptimiererLorem Picsum / Platzhalterbild-Generator
Startseite > Webmaster-Tools
 

SVG zu React/JSX Konverter

Der SVG-zu-React/JSX-Umrechner von MiniWebtool wandelt eingefügtes oder hochgeladenes SVG in eine React-Komponente um. Konfigurieren Sie TypeScript-Props, forwardRef, Memoisierung und Titelbehandlung; Attribut- und Stilumwandlung erfolgt im erzeugten Code.

Fragen zur Bedienung? Frag eine KI
Gemini (kopieren und öffnen)

Füge die kopierte Frage in den Gemini-Chat ein. Du kannst sie auch unten kopieren.

Frage ansehen

3× täglich kostenlosOhne RegistrierungSofortige Ergebnisse
SVG zu React/JSX KonverterJetzt testen — gratis ▼
Beispiele
Bereit
Fügen Sie ein vollständiges <svg>-Element ein. Der Server akzeptiert bis zu 220000 Zeichen.
Das Hochladen einer Datei füllt den Editor zur Vorschau aus. Die hochgeladene Datei wird dann beim Konvertieren verwendet.
Input <svg>
Normalisieren camelCase
React {...props}
Output Komponente
Elemente 0
Attribute 0
ViewBox -
Verwenden Sie PascalCase, zum Beispiel AlertIcon, BrandMark oder LogoGlyph.
Ausgabe-Einstellungen

Embed SVG zu React/JSX Konverter Widget

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.

Auf einen Blick

Der SVG zu React/JSX Konverter wandelt eingefügten SVG-Code oder eine hochgeladene .svg-Datei in eine React-Komponente um. Er schreibt die Attribute in JSX-Form um und bietet Ausgaben für TypeScript, forwardRef und React.memo.

SVG zu React/JSX Konverter: Funktionen auf einen Blick
FunktionWas Sie erhaltenGeeignet für
Einfügen oder hochladenFügen Sie SVG-Code in den Editor ein oder laden Sie eine UTF-8-.svg-Datei hoch.Icon- und Logodateien in Komponenten umwandeln
AttributumwandlungSVG-Attribute wie stroke-width, fill-rule und clip-path werden zu strokeWidth, fillRule und clipPath, und class wird zu className.Nicht jedes Attribut von Hand bearbeiten müssen
Style-ObjekteInline-Style-Strings werden in JSX-Style-Objekte mit camelCase-Namen der CSS-Eigenschaften umgewandelt.SVGs, die mit Inline-Styles exportiert wurden
KomponentenoptionenLegen Sie den Komponentennamen fest, wählen Sie einen Standard- oder benannten Export und fügen Sie optional TypeScript-Props, forwardRef, React.memo und das Weitergeben von Props hinzu.Icon-Bibliotheken von Design-Systemen und TypeScript-Projekte
Title-PropOptionale Titelunterstützung fügt dem SVG über eine Prop einen barrierefreien Titel hinzu.Aussagekräftige Icons, die Screenreader ansagen sollen
BereinigungStandardmäßig aktiv: Entfernt Script-Tags, Inline-Ereignishandler und javascript:-Links aus dem erzeugten Code.SVGs aus fremden Quellen prüfen

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

Bereinigung von React-AttributenGängige SVG-Attribute wie stroke-width, fill-rule und clip-path werden in strokeWidth, fillRule und clipPath umgeschrieben.
Ergonomie der KomponentenOptionale Anpassungen wie {...props}, forwardRef, React.memo, Default-Export, benannter Export und TypeScript-Props erleichtern das direkte Einfügen des Outputs in eine React-Codebasis.
Sichere Code-ÜberprüfungDie Bereinigung entfernt standardmäßig Script-Tags, Inline-Event-Handler und javascript:-Links, sodass das generierte JSX vor der Verwendung sicherer inspiziert werden kann.

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.

Zitieren Sie diesen Inhalt, diese Seite oder dieses Tool als:

"SVG zu React/JSX Konverter" unter https://MiniWebtool.com/de/svg-zu-react-jsx-konverter/ von MiniWebtool, https://MiniWebtool.com/

vom MiniWebtool-Team. Aktualisiert: 2026-05-22

Chatte mit deiner bevorzugten KI

Gemini (kopieren und öffnen)

Füge die kopierte Frage in den Gemini-Chat ein. Du kannst sie auch unten kopieren.

Frage ansehen

Webmaster-Tools:

Beliebte und aktualisierte Tools:

Bild zu SVG TracerURL-Slug-GeneratorOnline HTML KomprimiererAlle anzeigen →
Startseite > Webmaster-Tools > SVG zu React/JSX Konverter