快捷導(dǎo)航

vue3+vite項(xiàng)目中顯示SVG圖片的實(shí)現(xiàn)

更新時(shí)間：2024年02月21日 14:50:55 作者：碼農(nóng)鍵盤上的夢

vite-plugin-svg-icons是一個Vite插件,其作用是將SVG圖標(biāo)文件轉(zhuǎn)換為Vue組件,本文主要介紹了vue3+vite項(xiàng)目中顯示SVG圖片的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下

使用vite-plugin-svg-icons插件，可以將SVG圖標(biāo)文件導(dǎo)入到項(xiàng)目中，并將其轉(zhuǎn)換為可復(fù)用的Vue組件。這樣，就可以像使用普通Vue組件一樣使用這些SVG圖標(biāo)，包括在模板中直接使用、傳遞屬性、綁定事件等。

該插件還提供了一些額外的功能，如自動按需引入圖標(biāo)、支持圖標(biāo)的自定義命名、支持指定圖標(biāo)大小等。

總之，vite-plugin-svg-icons插件的作用是簡化在Vue項(xiàng)目中使用SVG圖標(biāo)的過程，提供了更加靈活和方便的方式來管理和使用這些圖標(biāo)。

vite-plugin-svg-icons 安裝

node version: >=12.0.0

vite version: >=2.0.0

npm i vite-plugin-svg-icons -D
// 或者
yarn add vite-plugin-svg-icons -D
// 或者
pnpm install vite-plugin-svg-icons -D

配置使用vite-plugin-svg-icons

vite.config.ts 中的配置插件

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

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要緩存的圖標(biāo)文件夾
        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__',
      }),
    ],
  }
}

在 src/main.ts 內(nèi)引入注冊腳本

import 'virtual:svg-icons-register'

到這里 svg 已經(jīng)引入可以使用

如何在Vue 組件使用

/src/components/SvgIcon.vue

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

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'SvgIcon',
  props: {
    prefix: {
      type: String,
      default: 'icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#333',
    },
  },
  setup(props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
    return { symbolId }
  },
})
</script>

icons 目錄結(jié)構(gòu)

# src/icons

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

/src/App.vue

<template>
  <div>
    <SvgIcon name="icon1"></SvgIcon>
    <SvgIcon name="icon2"></SvgIcon>
    <SvgIcon name="icon3"></SvgIcon>
    <SvgIcon name="dir-icon1"></SvgIcon>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue'

import SvgIcon from './components/SvgIcon.vue'
export default defineComponent({
  name: 'App',
  components: { SvgIcon },
})
</script>

優(yōu)點(diǎn)

可擴(kuò)展性：vite-plugin-svg-icons 提供了靈活的配置選項(xiàng)，允許開發(fā)者自定義圖標(biāo)的加載和使用方式。
輕量級：vite-plugin-svg-icons 是一個輕量級的插件，沒有額外的依賴，可以快速集成到現(xiàn)有的項(xiàng)目中。
性能優(yōu)化：vite-plugin-svg-icons 可以將 SVG 圖標(biāo)轉(zhuǎn)換為內(nèi)聯(lián)的 Vue 組件，減少 HTTP 請求，提高頁面加載速度。
簡化開發(fā)流程：使用 vite-plugin-svg-icons，開發(fā)者可以直接在代碼中引用 SVG 圖標(biāo)，無需手動處理 SVG 文件。
兼容性：vite-plugin-svg-icons 支持多種類型的 SVG 圖標(biāo)，包括普通的 SVG 文件、Symbol 圖標(biāo)和圖標(biāo)字體等。

到此這篇關(guān)于vue3+vite項(xiàng)目中顯示SVG圖片的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3 顯示SVG圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: