So nutzt du: SVG zu JSX Konverter
- Füge deinen SVG-Code ein, öffne eine
.svg-Datei oder klicke auf Beispiel. - Lege den Komponentennamen und die Optionen fest — TypeScript, Props-Spread, das Entfernen fester Größen oder das Umstellen der Farben auf
currentColor. - Prüfe die bereinigte Vorschau, ob das Icon richtig aussieht.
- Kopiere die Komponente oder lade sie als
.jsx/.tsx-Datei herunter und importiere sie in dein React- oder Next.js-Projekt.
Warum SVG für React umgewandelt werden muss
SVG ist XML, und JSX ist JavaScript, das nur wie HTML aussieht. Wenn du rohes SVG in eine React-Komponente einfügst, gibt es meist Warnungen wie „Invalid DOM property stroke-width. Did you mean strokeWidth?“ oder einen Build-Fehler bei Namespace-Attributen wie xlink:href und inkscape:label. Dieser Konverter schreibt den Code in gültiges JSX um und verpackt ihn in eine Komponente.
Was umgewandelt wird
| SVG | JSX |
|---|---|
class="icon" | className="icon" |
stroke-width="2", fill-rule, stop-color | strokeWidth="2", fillRule, stopColor |
xlink:href="#a", xml:space | xlinkHref="#a", xmlSpace |
style="fill-opacity: .5; stroke-linecap: round" | style={{ fillOpacity: 0.5, strokeLinecap: 'round' }} |
data-* und aria-* | Bleiben unverändert (React erwartet hier Bindestriche) |
<?xml?>, <!DOCTYPE>, Kommentare, <metadata>, Editor-Attribute (Inkscape, Sodipodi, Sketch) | Entfernt |
onclick und andere Inline-Handler, <script> | Entfernt — String-Handler sind in React nicht gültig |
Icons flexibel machen
Ist Props-Spread aktiviert, endet die Komponente mit {...props} am <svg>. So kannst du className, width, aria-label oder Event-Handler übergeben: <HeartIcon className="h-6 w-6" />. Breite/Höhe entfernen lässt CSS die Größe bestimmen (ein viewBox wird aus der alten Größe ergänzt, falls er fehlt). Farben → currentColor ersetzt Füllungen und Striche, sodass das Icon die Textfarbe übernimmt — ideal für einfarbige Icon-Sets. Die TypeScript-Option typisiert die Props als SVGProps<SVGSVGElement>.
Barrierefreiheit
Bei dekorativen Icons neben Text setzt du aria-hidden="true". Bei aussagekräftigen Einzel-Icons behältst du ein <title> bei oder übergibst role="img" mit einem aria-label.
Datenschutz und Sicherheit
Die Konvertierung läuft komplett in deinem Browser — das SVG verlässt dein Gerät nie. Die Vorschau wird bereinigt: Skripte, foreignObject, Inline-Event-Handler und externe Referenzen werden vor dem Rendern entfernt. Arbeitest du mit einem Bundler-Workflow? Tools wie SVGR machen dasselbe zur Build-Zeit; diese Seite ist für schnelle Einzel-Icons gedacht. Um ein SVG stattdessen als CSS-Hintergrund zu nutzen, probier SVG zu CSS.
Auch gesucht als: svg zu jsx, svg zu react, svg zu tsx, svg in react umwandeln, react svg komponente, svgr online, jsx konverter, svg icon react.
Passende Tools zu: SVG zu JSX Konverter
- HTML zu Markdown — Füge HTML ein – oder kopiere Rich Text direkt aus einer Webseite, einem Google Doc oder einer E-Mail – und erhalte aufgeräumtes Markdown, das du in eine README, ein Wiki oder eine statische Seite einfügen kannst.
- JSON zu TypeScript — Füge ein JSON-Beispiel ein, etwa eine API-Antwort oder eine Konfiguration, und erhalte sofort einsatzbereite TypeScript-Interfaces mit verschachtelten Typen, optionalen Eigenschaften und Union-Types.
- Bild in Base64 — Wandle ein PNG-, JPEG-, SVG-, WebP- oder GIF-Bild in eine Base64-Daten-URI mit kopierfertigem CSS und HTML um – oder füge eine Base64-Zeichenkette ein, um eine Vorschau des Bildes anzuzeigen und es herunterzuladen.
- HTML Formatter — Füg minifiziertes oder unübersichtliches Markup ein und erhalte sauber und einheitlich eingerücktes HTML – inklusive eingebetteter <style>- und <script>-Blöcke.
Häufige Fragen
Warum warnt React mit „Invalid DOM property class“?
class ist ein reserviertes Wort in JavaScript, deshalb verwendet React className. Dasselbe gilt für SVG-Attribute mit Bindestrich, die in camelCase geschrieben werden müssen (stroke-width → strokeWidth). Dieses Tool wandelt sie automatisch um.Soll ich xlinkHref oder href verwenden?
href, xlink:href gilt als veraltet. React akzeptiert weiterhin xlinkHref, der konvertierte Code funktioniert also weiter. Du kannst auf href wechseln, wenn du sehr alte Browser nicht unterstützen musst.Wie ändere ich die Farbe des Icons mit CSS?
color seines Elternelements, sodass className="text-red-500" oder style={{ color: "red" }} die Farbe ändert.Funktioniert die Ausgabe in Next.js und Vite?
Funktioniert das auch für React Native?
react-native-svg, das großgeschriebene Komponenten wie <Svg> und <Path> verwendet. Die camelCase-Attribute aus diesem Tool sind ein guter Ausgangspunkt, du musst aber die Elemente umbenennen.