Comment utiliser la méthode svg dans vue3+vite2

1. Installez vite-plugin-svg-icons

Vous devez également installer les dépendances liées à fast-glob, sinon vite signalera Impossible de trouver le module 'fast-glob&rsquo lors de l'exécution de npm run dev ; Erreur

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

2. Créez un nouveau composant 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>

sous src/components/svgIcon 3. Ajoutez des paramètres à tsconfig.json

#🎜🎜 # types est utilisé pour spécifier les modules qui doivent être inclus. Seuls les fichiers de déclaration des modules répertoriés ici seront chargés. Il n'est pas nécessaire de l'ajouter lorsque j'ai testé les deux démos, l'une était nécessaire et l'autre non. Si vous rencontrez des problèmes, vous pouvez essayer d'ajouter

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

4. Plug-in de configuration. vite.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. Enregistrez le composant globalement dans 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. Utilisez-le dans la page

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

7 . Structure du répertoire de fichiers et affichage de ses effets

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!