Zum Inhalt springen
SvgJsx
Sprache: Deutsch

SVG in eine SolidJS-Komponente umwandeln

Erstelle SolidJS-Icon-Komponenten aus SVG-Code. Die Ausgabe folgt Solids Attributkonventionen, typisiert Props mit JSX.SvgSVGAttributes und bleibt reaktiv.

Schnellvorlagen:
.svg-Dateien hierher ziehen oderDateien werden lokal mit FileReader gelesen und niemals hochgeladen.
Optionen
Export:
import type { JSX } from "solid-js";

const HeartIcon = (props: JSX.SvgSVGAttributes<SVGSVGElement>) => {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" class="icon icon-heart" {...props}>
      <g id="Layer_1" fill="none" stroke="#e11d48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style="fill-opacity:0.15;fill:#e11d48" />
      </g>
    </svg>
  );
};

export default HeartIcon;

Vorschau

Vorschau des konvertierten SVG
Original-SVG
706 B
Optimiertes SVG
538 B(-24 %)
Komponente
656 B

Wie sich Solid von React unterscheidet

Solids JSX bildet Attribute direkt auf das DOM ab, daher bleiben SVG-Attribute wie stroke-width und class genau so, wie sie in der Datei stehen. Anders als in React müssen sie nicht in camelCase oder className umbenannt werden.

Props sind in Solid reaktive Getter, und Destructuring zerstört die Reaktivität. Wenn du die size-Prop aktivierst, trennt der Konverter size mit splitProps von den übrigen Props und reicht den Rest an das <svg> weiter – so bleiben alle Werte reaktiv.

Erzeugte TypeScript-Typen

Die Props sind als JSX.SvgSVGAttributes<SVGSVGElement> aus solid-js typisiert und decken alle SVG-Attribute und Event-Handler ab. Mit der size-Option wird der Typ um { size?: number | string } erweitert.

Die Komponente in SolidStart nutzen

Erste Schritte:

  • Speichere die Ausgabe als IconName.tsx in deinem Ordner src/components.
  • Importiere sie und rendere <IconName size={18} class="icon" />.
  • Nutze currentColor, um die Farbe des umgebenden Texts zu übernehmen.
  • Refs funktionieren über die normale ref-Prop; forwardRef wird in Solid nicht benötigt.

Häufige Fragen

Warum werden Attribute für Solid nicht in camelCase umgewandelt?

Solid setzt Attribute direkt an DOM-Elementen, und SVG-Attribute sind im DOM case-sensitiv und mit Bindestrichen geschrieben. Die Originalnamen beizubehalten ist die zuverlässigste Ausgabe.

Gelten forwardRef und memo für Solid?

Nein. Solid-Komponenten laufen nur einmal und erhalten Refs als normale Props, daher werden diese React-spezifischen Optionen ignoriert, wenn Solid ausgewählt ist.

Bleibt die Komponente reaktiv?

Ja. Der Konverter destrukturiert Props nie; er verwendet splitProps für die size-Prop und liest sie als local.size, sodass Änderungen ankommen, ohne das Element neu zu erzeugen.

Kann ich die Ausgabe mit Astro verwenden?

Ja. Astro unterstützt Solid-Komponenten über die Integration @astrojs/solid-js, und das Icon wird auf dem Server gerendert, ohne JavaScript auszuliefern, solange du es nicht hydrierst.