vue3 vite2 封裝 SVG 圖標組件 - 基於 vite 創建 vue3 全家桶項目續篇

2022 年 10 月 4 日
筆記
前端, VUE, SVG, vite

在《基於 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 圖標，可在瀏覽器中直接訪問：

//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="//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="//www.yygnb.com/demo/car.svg"></svg-icon>
  <svg-icon icon="car"></svg-icon>

  <svg-icon class-name="icon" icon="//www.yygnb.com/demo/car.svg"></svg-icon>
  <svg-icon class-name="icon" icon="car"></svg-icon>
</div>

上面的程式碼分別顯示在線圖標和本地圖標，頁面顯示結果如下：

可以看出在線圖標、本地圖標、自定義樣式類都可以正常顯示，這樣便完成了 svg-icon 的封裝。

感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支援一下，點贊、關注、收藏，作者會持續與大家分享更多乾貨

Tags: 前端 VUE SVG vite