Analisis mendalam tentang cara menggunakan ikon svg dalam vue3 vite

Imej svg digunakan secara meluas dalam projek Artikel berikut akan memperkenalkan cara menggunakan ikon svg dalam vue3 vite.

vite-plugin-svg-icons

• Dipramuat apabila projek sedang dijalankan Generate semua ikon, hanya mengendalikan dom sekali
• Prestasi tinggi Cache terbina dalam, hanya apabila fail diubah suai, ia akan dijana semula

(Belajar perkongsian video : tutorial vuejs)

Pemasangan

versi nod: >= 12.0 .0 versi vite: >=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

Gunakan

• Pemalam konfigurasi dalam vite.config.ts

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

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

        /**
         * 自定义插入位置
         * @default: body-last
         */
        // inject?: 'body-last' | 'body-first'

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        // customDomId: '__svg__icons__dom__',
      }),
    ],
  }
}

• Perkenalkan skrip pendaftaran dalam src/main.js

import 'virtual:svg-icons-register'

Cara membuat komponen SvgIcon menggunakan

/src/ komponen /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>

• ikon struktur direktori

# src/icons

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

• Komponen pendaftaran 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 'virtual:svg-icons-register'

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

• Penggunaan halaman

<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>

Dapatkan semua SymbolId

import ids from 'virtual:svg-icons-names'
// => ['icon-icon1','icon-icon2','icon-icon3']

(Mempelajari perkongsian video: pembangunan bahagian hadapan web, Pengenalan kepada pengaturcaraan)

Atas ialah kandungan terperinci Analisis mendalam tentang cara menggunakan ikon svg dalam vue3 vite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!