vue3 vite2 封裝 SVG 圖示元件

在《基於 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 圖示可以成功顯示：

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

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