使用vite顯示本地svg圖標
????????vite-plugin-svg-icons是一個Vite插件，其作用是將SVG圖標文件轉換為Vue組件，以便在Vue項目中使用。
????????使用vite-plugin-svg-icons插件，可以將SVG圖標文件導入到項目中，并將其轉換為可復用的Vue組件。這樣，就可以像使用普通Vue組件一樣使用這些SVG圖標，包括在模板中直接使用、傳遞屬性、綁定事件等。
????????該插件還提供了一些額外的功能，如自動按需引入圖標、支持圖標的自定義命名、支持指定圖標大小等。
????????總之，vite-plugin-svg-icons插件的作用是簡化在Vue項目中使用SVG圖標的過程，提供了更加靈活和方便的方式來管理和使用這些圖標。
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({// 指定需要緩存的圖標文件夾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 內引入注冊腳本
import 'virtual:svg-icons-register'到這里 svg 已經引入可以使用
如何在Vue 組件使用
/src/components/SvgIcon.vue
<template><svg aria-hidden="true"><use :xlink:href="symbolId" :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 目錄結構
# 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>優點：
-
可擴展性：vite-plugin-svg-icons 提供了靈活的配置選項，允許開發者自定義圖標的加載和使用方式。
-
輕量級：vite-plugin-svg-icons 是一個輕量級的插件，沒有額外的依賴，可以快速集成到現有的項目中。
-
性能優化：vite-plugin-svg-icons 可以將 SVG 圖標轉換為內聯的 Vue 組件，減少 HTTP 請求，提高頁面加載速度。
-
簡化開發流程：使用 vite-plugin-svg-icons，開發者可以直接在代碼中引用 SVG 圖標，無需手動處理 SVG 文件。
-
兼容性：vite-plugin-svg-icons 支持多種類型的 SVG 圖標，包括普通的 SVG 文件、Symbol 圖標和圖標字體等。
K題)
)
