SVG zu React JSX-Komponenten-Converter

SVG zu React JSX-Komponenten-Converter

Fügen Sie den Roh-SVG-Code ein und erhalten Sie eine saubere React-Funktionalkomponente zurück. Das Tool führt eine deterministische camelCase-Umkehrung für jedes Attribut durch, entfernt nicht-JSX-Syntax und umhüllt das Ergebnis mit einer bereitgestellten Komponente – optional typisiert, optional forwardRef-umhüllt und optional durch Eigenschaften vergrößert. Alles läuft lokal im Browser, sodass Ihre Icons und Logos nie aus Ihrem Gerät verlassen.

Nutzung

1. Fügen Sie das vollständige <svg>…</svg> Markup in das Eingabefeld ein.
2. Setzen Sie einen Komponentennamen (PascalCase, wie ArrowRightIcon).
3. Schalten Sie TypeScript, forwardRef, skalierbare Größe-Eigenschaften und Eigenschaftenverbreitung ein, um Ihren Projektanforderungen zu entsprechen.
4. Kopieren Sie den generierten JSX oder laden Sie ihn als ein .tsx / .jsx Datei.

Funktionen

• camelCase-Eigenschaften – stroke-width wird zu strokeWidth, fill-rule wird zu fillRuleund so weiter über die gesamte SVG-Spezifikation.
• Behandlung von reservierten Wörtern – class wird in className, for Zu htmlForund xlink:href Zu xlinkHref.
• Inline-Stil-Parser – style="color: red; font-size: 12px" wird in ein JSX-Stil-Objekt mit camelCase-Schlüsseln umgewandelt.
• TypeScript-Ausgabe – erzeugt React.SVGProps<SVGSVGElement> Typen bei Aktivierung.
• Modus skalierbarer Icons – ersetzt die festgelegte Breite/Höhe durch width und height Eigenschaften mit sinnvollen Standardwerten.
• forwardRef-Umwrappung – erzeugt eine React.forwardRef Komponente mit einem displayName für DevTools.
• Eigenschaftenverbreitung – leitet beliebige Eigenschaften auf die Wurzel weiter <svg> damit Verbraucher className, ARIA oder Ereignis-Handler festlegen können.
• Offline-Design – das SVG verlässt nie den Browser; keine Uploads, keine Serverrunden.