Une analyse approfondie de la façon d'utiliser les icônes svg dans vue3+vite-Voir.js-php.cn

Une analyse approfondie de la façon d'utiliser les icônes svg dans vue3+vite

青灯夜游

Libérer： 2022-04-28 20:58:47

original

6189 Les gens l'ont consulté

Les images

svg sont largement utilisées dans les projets. Cet article expliquera comment utiliser les icônes svg dans vue3 + vite. J'espère que cela sera utile à tout le monde !

Une analyse approfondie de la façon d'utiliser les icônes svg dans vue3+vite

vite-plugin-svg-icons

Préchargement Générez toutes les icônes lorsque le projet est en cours d'exécution, il suffit d'utiliser le dom une seule fois
Hautes performances Cache intégré, uniquement lorsque le le fichier est modifié. Ce n'est qu'alors qu'il sera régénéré

(Partage vidéo d'apprentissage : tutoriel vuejs)

Installation

version du nœud : >=12.0.0 vite version : > =2.0.0

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

Copier après la connexion

Utilisez le plugin de configuration

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

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), &#39;src/icons&#39;)],
        // 指定symbolId格式
        symbolId: &#39;icon-[dir]-[name]&#39;,

        /**
         * 自定义插入位置
         * @default: body-last
         */
        // inject?: &#39;body-last&#39; | &#39;body-first&#39;

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        // customDomId: &#39;__svg__icons__dom__&#39;,
      }),
    ],
  }
}

Copier après la connexion

vite.config.ts pour introduire le script d'enregistrement dans src/main.js

import &#39;virtual:svg-icons-register&#39;

Copier après la connexion

Comment utiliser dans les composants

Créer un composant SvgIcon

/src/components/SvgIcon/index.vue

<template>
  <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
    <use :xlink:href="symbolId" :fill="props.color" />
  </svg>
</template>

<script setup>
import { computed } from &#39;vue&#39;
const props = defineProps({
  prefix: {
    type: String,
    default: &#39;icon&#39;
  },
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: &#39;#333&#39;
  },
  size: {
    type: String,
    default: &#39;1em&#39;
  }
})

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

Copier après la connexion

structure du répertoire d'icônes

# src/icons

- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg

Copier après la connexion

Composants d'enregistrement global

# src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import svgIcon from "@/components/SvgIcon/index.vue";
import &#39;virtual:svg-icons-register&#39;

createApp(App)
    .use(ElementPlus)
    .use(router)
    .component('svg-icon', svgIcon)
    .mount('#app')

Copier après la connexion

Utilisation de la page

<template>
    <svg-icon v-if="props.icon" :name="props.icon" />
    <span v-if="props.title" slot=&#39;title&#39;>{{ props.title }}</span>
</template>

<script setup>

const props = defineProps({
    icon: {
        type: String,
        default: &#39;&#39;
    },
    title: {
        type: String,
        default: &#39;&#39;
    }
})
</script>

Copier après la connexion

Obtenez tous les SymbolId

import ids from &#39;virtual:svg-icons-names&#39;
// => [&#39;icon-icon1&#39;,&#39;icon-icon2&#39;,&#39;icon-icon3&#39;]

Copier après la connexion

(Partage de vidéos d'apprentissage : développement web front-end Introduction, à la programmation)

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!