SVG zu JSX Online – React Component Generator

Konvertieren Sie das SVG-Markup in eine React-Funktionskomponente mit den Attributen „className“ und „camelCase“. TypeScript Export optional.

Laden…
SVG zu JSX – Komponenten-Playbook reagieren
Verwandeln Sie SVG-Snippets in React-Funktionskomponenten ohne einen schweren Compiler. Behandelt Klasse → Klassenname und allgemeine SVG-Attribute.

Hinweise des Entwicklers

• Eingebettete <style>-Blöcke und Spritesheets werden in Version 1 nicht unterstützt. • xlink:href und xmlns werden in JSX-freundliche Namen konvertiert. • Überprüfen Sie die Ausgabe, bevor Sie sie in Designsysteme einbinden. • Mit „validate-svg“ koppeln, um fehlende ViewBox oder Titel zu erkennen.

Optionen

Komponentenname
Legt die Kennung der React-Funktionskomponente im generierten JSX fest (z. B. SvgIcon).
Standardexport
Wenn diese Option aktiviert ist, wird die Export-Standardfunktion ausgegeben …; Wenn diese Option deaktiviert ist, handelt es sich um einen benannten Export.
TypeScript
Fügt eine typisierte Requisitensignatur (SVGSVGElement-Attribute) für TSX-Drop-In hinzu.

Wenn Teams diese Route wählen

• Fügen Sie Marketingsymbole in React-Designsysteme ein. • Design-Übergabe SVG in TSX-Komponenten umwandeln. • Prototyp-Komponentennamen vor dem Hinzufügen zu einem Repo. • Lernen Sie die Unterschiede zwischen JSX-Attributen und rohem SVG kennen.

Ausgearbeitete Beispiele

Abzeichen mit JSX-unfreundlichen Attributen

Beispieleingabe

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"> <title id="badge-title">Schnelllieferungsabzeichen</title> <desc id="badge-desc">Abgerundetes Abzeichen mit Blitzsymbol und Hintergrund mit Farbverlauf.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f97316"/> <stop offset="100%" stop-color="#fb923c"/> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/> </clipPath> </defs> <g clip-path="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)"/> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/> </g> <g font-family="Inter, Arial, sans-serif" fill="#fff"> <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text> <text x="76" y="49" font-size="12" fill-opacity="0.92">Optimiertes SVG Asset</text> </g> </g> </svg>

Ausgabe

Exportieren Sie die Standardfunktion PromoBadge(props) { return ( ⟦T0⟧ ⟦T1⟧Fast delivery badge⟦T2⟧ ⟦T3⟧Rounded badge with lightning icon and gradient background.⟦T4⟧ ⟦T5⟧ ⟦T6⟧ ⟦T7⟧ ⟦T8⟧ ⟦T9⟧ ⟦T10⟧ ⟦T11⟧ ⟦T12⟧ ⟦T13⟧ ⟦T14⟧ ⟦T15⟧ ⟦T16⟧ ⟦T17⟧ ⟦T18⟧ ⟦T19⟧ ⟦T20⟧ ⟦T21⟧ ) }

xlink href-Attribut

Beispieleingabe

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10"><use xlink:href="#dot"/></svg>

Ausgabe

Gibt xlinkHref auf <use> mit einem React-Komponenten-Wrapper aus.

Navigieren Sie durch verwandte SVG-Tools

Optimieren Sie zuerst mit optimize SVG, validieren Sie die Zugänglichkeit auf validieren Sie SVG oder öffnen Sie den SVG Hub.

SVG zu JSX-FAQ

Leichte React-Konvertierung

Unterstützt es eingebettetes CSS?

Nicht in Version 1 – <style> Blöcke werden übersprungen. Inline-Stilattribute werden in Objekte umgewandelt.

TypeScript exportieren?

Aktivieren Sie den Schalter TypeScript, um der Komponente Requisiten hinzuzufügen.

Sprites?

Sprite-Sheets liegen außerhalb des Gültigkeitsbereichs – fügen Sie ein einzelnes Stammelement <svg> ein.

SVG Werkzeuge

Vorschau anzeigen, mit SVGO optimieren, Daten exportieren URI, Größe ändern, verschönern, in JSX konvertieren und SVG validieren – alles in Ihrem Browser.

Weitere Werkzeugkategorien entdecken

Minimieren

Verkleinern Sie Code und Ressourcen für die Produktion – minimieren Sie JavaScript, CSS, HTML, JSON und XML vor der Bereitstellung von gzip oder CDN.

Verschönern

Machen Sie Code mit konsistenter Einrückung lesbar – verschönern Sie JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML und mehr in Ihrem Browser.

Aufheben

Erweitern Sie minimierten oder komprimierten Code – entminifizieren Sie JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML und andere Formate beim Debuggen oder Überprüfen.

Konvertierung

Transformieren Sie Daten zwischen JSON, YAML, XML und CSV lokal – keine Server-Uploads.

CSS-Präprozessoren

Kompilieren Sie SCSS oder LESS zu Standard-CSS im Browser — kombinieren Sie mit Beautify oder Minify für einen vollständigen Stylesheet-Workflow.

JSON Werkzeuge

Validieren, formatieren, vergleichen und erkunden Sie JSON-Nutzlasten – ergänzend zu Minifiern und Konvertern.

DevOps und Infrastruktur

Terraform HCL formatieren/validieren/minimieren, Dockerfile formatieren und lint, Docker Verfassen und .env-Validierung.

CI/CD

GitHub Aktionen und GitLab CI – formatieren Sie YAML und überprüfen Sie die Workflow-/Auftragsstruktur in Ihrem Browser.

Protokolle und Beobachtbarkeit

Zeilenorientierte JSON/NDJSON- und Nginx/Apache-Zugriffsprotokolle – formatieren, filtern, validieren und CSV/TSV.

Kubernetes

Multi-Doc-Manifeste, strukturelle Validierung, Ingress/Deployment-Starter und Helm-Werteformatierung.

Netzwerk / IP

CIDR, Subnetze und IPv4/IPv6-Helfer — im Browser.

Sicherheit und Token

JWKS, X.509-Zertifikate und Secrets-Scan – browserlokal.

API & Schemata

OpenAPI Tools zum Formatieren, Validieren und Flusen Ihrer Spezifikationen.

Codierung

Kodieren oder dekodieren Sie Base64-, URL-Komponenten und HTML-Entitäten – nur clientseitig.

Entwickler-Dienstprogramme

Zeitstempel, UUID, ULID, Nanoid, Cron, Passwörter, Regex, Slugify, Zahlenbasen, Groß-/Kleinschreibung, Textunterschied und chmod – alles clientseitig.

Text & Markdown

Wörter zählen, Markdown-TOC erzeugen und Zeilenlisten bereinigen — im Browser.

KI & LLM

Token-Zählung, Kostenschätzung und Kontextfenster — 100 % im Browser.

Serialisierung

Serialisieren und deserialisieren Sie PHP-Datenstrukturen neben JSON-Workflows.