在 《基於 vite 創建 vue3 全家桶》一文整合了 *Element Plus*，並將 *Element Plus* 中提供的圖標進行全局註冊，這樣可以很方便的延續 *Element UI* 的風格 —— 通過 *el-icon-xxx* 的方式使用圖標（如果有問題的朋友可以先閱讀前面的文章：... ...
在 《基於 vite 創建 vue3 全家桶》一文整合了 Element Plus，並將 Element Plus 中提供的圖標進行全局註冊，這樣可以很方便的延續 Element UI 的風格 —— 通過 el-icon-xxx 的方式使用圖標（如果有問題的朋友可以先閱讀前面的文章：基於 Vite 創建 vue3 全家桶項目）。
在真實的企業級開發中，Element Plus 內置的圖標通常很難滿足業務需求，項目中需要引入大量的 SVG 圖標資源，本文描述如何在 Vue3 + Vite2 環境中使用 SVG 圖標，封裝一個支持本地 SVG 圖標和線上 SVG 圖標的組件 svg-icon。
文中實現的 svg-icon 組件會內置到 yyg-cli 腳手架中（通過 yyg 命令行創建的項目內置該組件），如果在此之前已經通過 yyg-cli 創建了項目，可以按照本文的步驟封裝 SVG 圖標組件 svg-icon 。
1 創建組件
在 src/components/ 目錄下創建目錄 svg-icon，該在目錄中創建 svg-icon 組件 index.vue。
1.1 輸入屬性
該組件需要兩個輸入屬性（props）：
- icon：SVG 圖標的名稱或線上 URL
- className：動態傳遞給該組件的樣式類名
代碼如下：
const props = defineProps({
// SVG 圖標名稱或線上URL
icon: {
type: String,
required: true
},
// 圖標類名
className: {
type: String,
default: ''
}
})
1.2 SVG 圖標樣式
在 style 中定義 svg-icon 的樣式類：
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
}
2 線上 SVG 圖標
svg-icon 組件需要支持線上 SVG 圖標和本地 SVG 圖標。首先實現線上 SVG 圖標的顯示。如下 URL 為一個線上 SVG 圖標，可在瀏覽器中直接訪問：
http://www.yygnb.com/demo/car.svg
2.1 判斷線上圖標
在 script 中通過計算屬性判斷 props 中的 icon 是否是線上圖標：
const isOnlineSvg = computed(() => /^(https?:)/.test(props.icon))
該判斷比較簡單，如果 icon 屬性以 http: 或 https: 開頭，則該圖標為線上圖標，其他情況均為本地的 SVG 圖標。各位朋友可以根據自己項目情況添加或完善該判斷邏輯。
2.2 模板和樣式
線上 SVG 圖標通過 HTML 元素 div 來顯示，css3 有個 mask 屬性，該屬性表示遮罩，可以部分或者完全隱藏一個元素的可見區域，使用方式與 background 很類似。
template 如下：
<div v-if="isOnlineSvg"
:style="{ '--svg-icon-url': `url(${icon})` }"
class="svg-icon svg-icon-online"
:class="className"/>
style 追加 svg-icon-online 樣式類：
.svg-icon-online {
background-color: currentColor;
mask-image: var(--svg-icon-url);
-webkit-mask-image: var(--svg-icon-url);
mask-size: cover;
-webkit-mask-size: cover;
display: inline-block;
}
上面的 template 和 style 使用到 vue3 的新特性，演示瞭如何將一個 script 中的 props 屬性傳遞給 scss“：
- 首先在模板中通過 style 屬性定義了一個變數 --svg-icon-url，該變數的值為 props 中的 icon 屬性。
- 在 scss 中設置 mask-image 時，使用 var 函數獲取變數 --svg-icon-url 的值。
3.3 測試線上圖標
在 about.vue 中引入 svg-icon ：
import SvgIcon from '@/components/svg-icon/index.vue'
測試使用該組件：
<div>
<svg-icon class-name="icon" icon="http://www.yygnb.com/demo/car.svg"></svg-icon>
</div>
添加自定義樣式：
.icon {
color: cornflowerblue;
font-size: 30px;
}
在瀏覽器中訪問 about 頁面，可以看到線上 SVG 圖標可以成功顯示：
3 本地 SVG 圖標
在 webpack 中載入 svg 資源可以使用 svg-sprite-loader，而 vite 中可以使用插件 vite-plugin-svg-icons。
3.1 安裝開發依賴
首先安裝 vite-plugin-svg-icons 為開發依賴：
yarn add vite-plugin-svg-icons -D
3.2 配置 vite
在 vite.config.ts 中配置該插件：
...
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
...
export default defineConfig({
...
plugins: [
...
createSvgIconsPlugin({
// 要緩存的圖標文件夾
iconDirs: [path.resolve(__dirname, 'src/svg')],
// 執行 icon name 的格式
symbolId: 'icon-[name]'
})
],
...
}
通過 createSvgIconsPlugin() 入參指定了svg 文件所在的目錄和 symbolId。
3.3 修改 main.ts
在 main.ts 中添加如下語句：
import 'virtual:svg-icons-register'
3.4 完成 svg-icon 組件
通過上述步驟，便完成了 vite-plugin-svg-icons 的配置，接下來實現 svg-icon 組件即可。前面已經完成了線上 svg、樣式等，現在只需要在 template 中補充本地 svg 的代碼即可：
<svg v-else
class="svg-icon"
:class="className"
aria-hidden="true">
<use :xlink:href="`#icon-${icon}`"/>
</svg>
組件 components/svg-icon/index.vue 完整代碼如下：
<template>
<div v-if="isOnlineSvg"
:style="{ '--svg-icon-url': `url(${icon})` }"
class="svg-icon svg-icon-online"
:class="className"/>
<svg v-else
class="svg-icon"
:class="className"
aria-hidden="true">
<use :xlink:href="`#icon-${icon}`"/>
</svg>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps({
// SVG 圖標名稱或線上URL
icon: {
type: String,
required: true
},
// 圖標類名
className: {
type: String,
default: ''
}
})
const isOnlineSvg = computed(() => /^(https?:)/.test(props.icon))
</script>
<style scoped lang="scss">
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
}
.svg-icon-online {
background-color: currentColor;
mask-image: var(--svg-icon-url);
-webkit-mask-image: var(--svg-icon-url);
mask-size: cover;
-webkit-mask-size: cover;
display: inline-block;
}
</style>
3.5 測試本地圖標
由於 vite.config.ts 中配置的 svg 目錄為 src/svg，首先將 car.svg 拷貝到該目錄下。繼續在 about.vue 中添加如下代碼：
<div>
<svg-icon icon="http://www.yygnb.com/demo/car.svg"></svg-icon>
<svg-icon icon="car"></svg-icon>
<svg-icon class-name="icon" icon="http://www.yygnb.com/demo/car.svg"></svg-icon>
<svg-icon class-name="icon" icon="car"></svg-icon>
</div>
上面的代碼分別顯示線上圖標和本地圖標，頁面顯示結果如下：
可以看出線上圖標、本地圖標、自定義樣式類都可以正常顯示，這樣便完成了 svg-icon 的封裝。
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關註、收藏，作者會持續與大家分享更多乾貨
