So verwenden Sie die SVG-Methode in vue3+vite2

1. Installieren Sie vite-plugin-svg-icons

Sie müssen auch fast-glob-bezogene Abhängigkeiten installieren, andernfalls meldet Vite, dass das Modul „fast-glob“ beim Ausführen von npm run dev nicht gefunden werden konnte; Fehler

npm i fast-glob@3.x -D
npm i vite-plugin-svg-icons@2.x -D

2. Erstellen Sie eine neue Komponente index.vue

<template>
  <svg aria-hidden="true" class="svg-icon">
    <use :xlink:href="symbolId" rel="external nofollow"  :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from &#39;vue&#39;;

const props = defineProps({
  prefix: {type: String,default: &#39;icon&#39;,},
  iconClass: {type: String,required: true,},
  color: {type: String,default: &#39;&#39;}
})

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  overflow: hidden;
  fill: currentColor;
}
</style>

unter src/components/svgIcon#3. Fügen Sie Einstellungen in tsconfig.json

#🎜🎜 hinzu Mit #types werden die einzubindenden Module angegeben. Es werden nur die Deklarationsdateien der hier aufgeführten Module geladen. Es ist nicht notwendig, es hinzuzufügen. Als ich zwei Demos getestet habe, wurde eine benötigt und die andere nicht. Wenn Sie Probleme haben, können Sie versuchen,

{
  "compilerOptions": {
    "types": ["vite-plugin-svg-icons/client"]
  }
}

4. Konfigurations-Plug-in in Vite hinzuzufügen .config.ts

import { resolve } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), 'src/assets/imgs/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    })
  ]
})

5. Registrieren Sie die Komponente global in main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import { store, key } from '@/store'

const app = createApp(App)

import 'virtual:svg-icons-register' // 引入注册脚本
import SvgIcon from '@/components/svgIcon/index.vue' // 引入组件
app.component('svg-icon', SvgIcon)

app.use(router).use(store, key).mount('#app')

6. Verwenden Sie sie auf der Seite

<template>
  <svg-icon icon-class="category"></svg-icon>
  <svg-icon icon-class="accountant" ></svg-icon>
</template>

7. Dateiverzeichnisstruktur und ihre Wirkungsanzeige

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die SVG-Methode in vue3+vite2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!