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.

0 chars · 0 B

Teilen Sie dieses Tool:

SVG Eingang

JSX-Ausgabe

Komponentenname

Standardexport

TypeScript

Bei der Konvertierung wird DOMParser lokal verwendet – keine Uploads.

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.

Weitere SVG-Tools

SVG minimieren SVG optimieren SVG Betrachter SVG zu Daten URI Verschönern SVG SVG aufhebenSVG zu JSXGröße ändern SVG SVG validieren

Suchen Sie nach Konvertern, Encodern, Formatierern und Minifiern an einem Ort? Hub für Entwicklertools Öffnen Sie den kuratierten Entwicklertools-Katalog.