SVG → Vue
Pack jedes SVG in eine .vue-Single-File-Komponente — oder nimm nur den Template-Block für eine Komponente, die du schon hast.
oder klicken zum Auswählen — nur SVG
Der Komponentenname kommt aus dem Dateinamen. Der script-Block benennt die Komponente nur — lösch ihn, wenn du das nicht brauchst.
Nur das Markup, zum Einfügen in eine Komponente, die du schon hast. Hatte das SVG ein eingebettetes style-Element, steckt dessen CSS im style-Block der Datei oben, nicht hier.
kein Umbenennen nötig
Vue-Templates werden als HTML geparst, ein SVG kann also genau so hinein, wie es geschrieben wurde. stroke-width bleibt stroke-width, class bleibt class, und ein inline-style-Attribut funktioniert weiter. Die Umwandlung besteht im Wesentlichen darin, die Datei zu umhüllen — deshalb sieht die Ausgabe der Eingabe so ähnlich.
Den Rest erledigt das Attribut-Durchreichen. Bei einem einzelnen Wurzelelement landet alles, was du der Komponente mitgibst, auf dem svg-Tag — width, class oder ein Klick-Handler funktionieren also, ohne dass du eine einzige Prop deklarierst.
drei Schritte
Wähle eine .svg-Datei — sie bleibt auf deinem Gerät.
Eine ganze .vue-Datei oder nur das Template.
Importiere sie wie jede andere Komponente und gib die Größe von außen vor.
kurze Antworten
Weil du keine brauchst. Eine Komponente mit einer einzigen Wurzel reicht jedes Attribut direkt an das svg-Tag weiter, also funktionieren width, height, class und Event-Listener bereits. Deklariere Props erst, wenn du daraus etwas berechnen willst.
Nur dafür, der Komponente einen Namen zu geben, der in den Vue-Devtools und in Warnmeldungen auftaucht. Ohne ihn rendert die Komponente identisch, Löschen ist also völlig unbedenklich.
In den scoped-style-Block am Ende der Komponente. Vue wirft style- und script-Tags innerhalb eines Templates weg; ein aus Illustrator oder Figma exportiertes SVG — das fast immer ein eingebettetes Stylesheet mitbringt — würde sonst komplett ohne Farben rendern. Das CSS auszulagern hält es funktionsfähig, und scoped sorgt dafür, dass es nicht in den Rest deiner App ausläuft.
Ersetze das fest eingetragene fill oder stroke durch currentColor und setze die Farbe per CSS an einem Elternelement. Der SVG-Farbwechsler kann vor der Umwandlung jede Farbe der Datei auf currentColor umstellen.
Für diese Ausgabe ja — script setup und defineOptions sind Vue-3-Funktionen. Unter Vue 2 funktioniert der Template-Block trotzdem: Füge ihn in das template einer gewöhnlichen Options-API-Komponente ein.
Nein. Die Umwandlung ist reine Zeichenkettenarbeit in deinem Browser.