SVG-zu-React-JSX-/TSX-Konverter

Das Symbol wie Text verhalten lassen

Eine Symbolkomponente lässt sich am einfachsten wiederverwenden, wenn sie Farbe und Größe von ihrem Einsatzort übernimmt. Ersetze fest codierte fill- oder stroke-Farben durch currentColor, damit das Symbol der Textfarbe seiner Umgebung folgt, und entferne width und height, während viewBox erhalten bleibt. So legen CSS oder ein className die Größe fest. Wenn du die Datei zuerst durch den SVG-Bereinigungsdienst laufen lässt, werden Editor-Metadaten entfernt, die sonst in deinem Bundle landen würden.

IDs, Stile und Barrierefreiheit

Verläufe, Masken und Beschneidungspfade werden über id referenziert. Wenn du dieselbe Komponente zweimal renderst, enthält die Seite doppelte IDs, sodass die zweite Kopie möglicherweise auf den Verlauf der ersten zeigt. Erzeuge mit Reacts useId eindeutige IDs, wenn ein Symbol solche Elemente verwendet.

Ein <style>-Element innerhalb der SVG macht JSX ungültig, weil seine geschweiften Klammern als Ausdrücke gelesen werden. Verschiebe diese Regeln in Attribute oder ein Stylesheet. Füge bei einem dekorativen Symbol aria-hidden="true" hinzu; bei einem Symbol mit eigener Bedeutung role="img" und einen <title>.

So benutzt du es

1. Rohen SVG-Quelltext einfügen.
2. Komponentennamen, TypeScript-Interfaces und Weitergabe der Props konfigurieren.
3. Den einsatzbereiten React-Komponenten-Code kopieren.

Datenschutz & Einschränkungen

Die Umwandlung der Auszeichnung erfolgt ausschließlich clientseitig in JavaScript.