SVG in React-Komponente umwandeln
Fügen Sie eine SVG ein und erhalten Sie eine sofort einsetzbare React-Komponente (.tsx), bei der alle Attribute in camelCase umgewandelt sind (className, strokeWidth ...) und eine Prop props weitergereicht wird.
Was genau macht diese Umwandlung?
JSX (von React verwendet) akzeptiert keine HTML-/SVG-Attribute in Kebab-Case wie stroke-width oder class: Sie müssen in camelCase geschrieben werden (strokeWidth, className). Dieses Werkzeug schreibt automatisch alle Attribute der SVG nach dieser Konvention um und verpackt das Ergebnis in eine TypeScript-Komponentenfunktion, die Sie direkt in ein React-Projekt kopieren können.
Akzeptiert die erzeugte Komponente eigene Props (Farbe, Größe)?
Ja, die Komponente reicht alle empfangenen Props ({...props}) direkt an das <svg>-Tag weiter: Sie können also className, width, height, onClick usw. von der übergeordneten Komponente aus übergeben wie bei jedem anderen SVG-Element.
Funktioniert die Komponente auch in reinem JavaScript (ohne TypeScript)?
Die erzeugte Datei ist in TypeScript geschrieben (mit Typisierung der Props). Es genügt jedoch, die Zeile mit dem Typ-Import und die Annotation : SVGProps<SVGSVGElement> zu entfernen, um sie direkt in einem klassischen JavaScript-Projekt zu verwenden.
100% lokale Verarbeitung: Die Komponente wird vollständig in Ihrem Browser erzeugt, Ihre SVG wird nie an einen Server gesendet.