Ein Artikel, der ausführlich erklärt, wie SVG-Symbole in Vue3-Projekten eingeführt werden

Wie füge ich SVG-Symbole in Vue3-Projekte ein? Der folgende Artikel zeigt Ihnen, wie Sie Iconfont-Symbole in Vue3-Projekte einführen. Ich hoffe, er wird Ihnen hilfreich sein!

Einführung

Durch das Lernen von Express und MySQL vor einiger Zeit

hier versuche ich, ein Backend-System aufzubauen, um die Lerntechnologie zu konsolidieren.

SVG-Symbol

Da es sich um eine Seite handelt, muss sie untrennbar mit einigen Symbolen verbunden seinSymbol, daher müssen Sie zur umfassendsten Alibaba-Symbolbibliothek gehen, um sie zu finden

Hier erklären wir, wie Sie das verwenden Ali Icon Library Stellen Sie Dinge auf unsere Seite

Alibaba Icon Library

Betreten Sie die Seite, suchen Sie Mein Projekt unter Ressourcenverwaltung und erstellen Sie das Projekt

Stellen Sie es wie folgt ein

Erstellen Nach dem Projekt haben wir Alibabas Materialbibliothek aufgerufen, um einige Symbole zu finden, die wir später benötigen,

und sie dem Warenkorb hinzugefügt,

die Symbole im Warenkorb dem Projekt hinzugefügt

Es wird zuvor eine Online-Symbol-Link-Adresse geben, lassen Sie uns diese vorstellen.

Aber ich kann es jetzt nicht finden. Es sollte lokal heruntergeladen und dann verwendet werden = =

Dann können wir nur das Symbol im Projekt Symbol auswählen und es lokal herunterladen

und einfügen

Entpacken im Verzeichnis srcassetssvg

, löschen Sie unnötige Dinge und lassen Sie nur die Datei

iconfont.js übrig

Dann importieren Sie SVG global in

main.ts

import './assets/svg/iconfont.js'

. -icon

Im

src Verzeichnis, erstellen Sie ein Verzeichnis zum Speichern von Plug-Ins

// index.vue

<template>
  <svg>
    <use></use>
  </svg>
</template>

<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  iconName: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: &#39;&#39;
  },
  color: {
    type: String,
    default: &#39;#409eff&#39;
  }
})
// 图标在 iconfont 中的名字
const iconClassName = computed(() => {
  return `#${props.iconName}`
})
// 给图标添加上类名
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return &#39;svg-icon&#39;
})
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>

// index.ts

import { App } from 'vue'

import SvgIcon from './index.vue'

export function setupSvgIcon(app: App) {
  app.component('SvgIcon', SvgIcon)
}

Registrieren Sie dann die Komponente

import { setupSvgIcon } from './plugin/SvgIcon/index'
setupSvgIcon(app)

in main.ts und verwenden Sie sie auf der Seite

<template>
  <div> 工作台页面 </div>

  <svg-icon></svg-icon>
</template>

Sie können sehen Das

SVG

-Symbol wird erfolgreich angezeigt. SVG-Symbol in das Projekt.

【Verwandte Empfehlung: vuejs Einführungs-Tutorial】

Das obige ist der detaillierte Inhalt vonEin Artikel, der ausführlich erklärt, wie SVG-Symbole in Vue3-Projekten eingeführt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!