Zum Inhalt springen
SvgJsx
Sprache: Deutsch

SVG in eine Vue-Single-File-Component umwandeln

Verpacke jedes SVG in eine Vue-3-Single-File-Component (.vue) mit sauberem <template>, optionalem <script setup lang="ts"> und einer size-Prop – bereit zum Import in deine App.

Schnellvorlagen:
.svg-Dateien hierher ziehen oderDateien werden lokal mit FileReader gelesen und niemals hochgeladen.
Optionen
Export:
<script setup lang="ts">
defineOptions({ name: "HeartIcon" });
</script>

<template>
  <svg width="24" height="24" viewBox="0 0 24 24" class="icon icon-heart">
    <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>
</template>

Vorschau

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

So sieht die Vue-Ausgabe aus

Vue-Templates akzeptieren SVG-Attribute unverändert, deshalb behält der Konverter kebab-case-Namen wie stroke-width und class. Er entfernt Editor-Ballast, die XML-Deklaration und optional xmlns und setzt das Markup in einen <template>-Block.

Ist die size-Option aktiv, deklariert ein <script setup>-Block eine size-Prop mit Standardwert und bindet sie an :width und :height. Mit TypeScript wird die Prop über defineProps<{ size?: number | string }>() und withDefaults deklariert.

Attribut-Fallthrough

Da das <svg> das einzige Wurzelelement ist, reicht Vue Attribute, die nicht als Props deklariert sind, automatisch weiter. class, style, aria-label und Event-Listener wie @click landen also ohne zusätzlichen Code auf dem <svg>. Die Option zum Weiterreichen der Props ist für Vue daher nicht nötig.

Die Komponente verwenden

Typische Verwendung in einem Vue-3- oder Nuxt-Projekt:

  • Speichere die Ausgabe als IconName.vue in deinem components-Ordner.
  • Importiere sie: import IconName from "./IconName.vue".
  • Rendere <IconName :size="20" class="text-emerald-600" /> in einem beliebigen Template.
  • Mit aktiviertem currentColor folgt das Icon der CSS-Eigenschaft color.

Häufige Fragen

Funktioniert die Ausgabe mit Vue 2?

Das Template funktioniert auch in Vue 2.7, aber <script setup> mit defineProps erfordert Vue 2.7 oder Vue 3. Für ältere Vue-2-Projekte deaktivierst du die size-Prop und erhältst eine reine Template-Komponente.

Kann ich sie mit Nuxt verwenden?

Ja. Lege die Datei im components-Verzeichnis ab, und Nuxt importiert sie automatisch über ihren Namen, zum Beispiel <IconArrow /> für components/IconArrow.vue.

Warum warnt Vue vor <style> in meinem SVG?

Vue entfernt <style>-Tags aus Templates, weil sie Seiteneffekte haben. Verschiebe das CSS in den <style scoped>-Block der Komponente oder wandle es vor der Konvertierung in Attribute um.

Ist vite-svg-loader die bessere Wahl?

Ein Loader ist praktisch, wenn du viele SVGs zur Build-Zeit importierst. Die Umwandlung in .vue-Dateien gibt dir volle Kontrolle über Markup und Props und kommt ohne Build-Konfiguration aus.