Maison > interface Web > Voir.js > Comment utiliser la méthode svg dans vue3+vite2

Comment utiliser la méthode svg dans vue3+vite2

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2023-05-11 17:55:06
avant
1750 Les gens l'ont consulté

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
Copier après la connexion

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>
Copier après la connexion

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"]
  }
}
Copier après la connexion

4. Plug-in de configuration. vite.config.ts

import { resolve } from &#39;path&#39;
import { createSvgIconsPlugin } from &#39;vite-plugin-svg-icons&#39;

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), &#39;src/assets/imgs/svg&#39;)],
      // 指定symbolId格式
      symbolId: &#39;icon-[dir]-[name]&#39;,
    })
  ]
})
Copier après la connexion

5. Enregistrez le composant globalement dans main.ts

import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;@/router&#39;
import { store, key } from &#39;@/store&#39;

const app = createApp(App)

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

app.use(router).use(store, key).mount(&#39;#app&#39;)
Copier après la connexion

6. Utilisez-le dans la page

<template>
  <svg-icon icon-class="category"></svg-icon>
  <svg-icon icon-class="accountant" ></svg-icon>
</template>
Copier après la connexion
7 . Structure du répertoire de fichiers et affichage de ses effets

Comment utiliser la méthode svg dans vue3+vite2

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!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal