預覽本文的實作效果：
# gitee 本文主要描寫如何讓 Vue 工程支援 SVG 圖示，以及如何擷取 SVG 圖示。
Git 本地倉庫切換新分支：
git checkout -b 02_SVGIcon 确認分支：
git branch 1 SVG 圖示的擷取
無論是 SVG 圖示，還是 PNG 等其他格式的圖示，都可以從阿裡的 iconfont 網站上搜尋。網址：https://www.iconfont.cn 。
打開網站後，自己新增賬號。最簡單的使用方式，就是直接搜尋你要的圖示。舉個例子，找個首頁的圖示：
1、 在首頁搜尋框搜尋“首頁”，回車
搜尋“首頁”
2、 選擇需要的圖示
3、 滑鼠移動到該圖示上，點選下載下傳樣式的按鈕
4、下載下傳或複制該 SVG 圖示：
“複制 SVG” 不含檔案頭，需要手動添加。我的習慣是沒有 SVG 圖示時，第一次“SVG 下載下傳”，之後建立 SVG 檔案，從已下載下傳的 SVG 中複制檔案頭，然後點選頁面上的 “複制 SVG”，将内容貼到 建立的 SVG 檔案中。此處先下載下傳該 svg 圖示。
該網站也可以建立項目，将你需要的圖示添加到項目中，然後一次性生成并下載下傳。我不太喜歡這種使用方式。兩個原因：
- 上述方式生成的 class 命名五花八門，也許不符合項目規範；
- 項目是持續疊代的，如果你手動更新命名，疊代過程中需要新圖示，你如何疊加進去；
- 我需要些什麼圖示我自己都不知道，在開發過程中需要什麼圖示才去搜尋下載下傳。
2 使工程支援 SVG
2.1 安裝依賴
Vue 項目如果要使用 SVG 圖示，需要 SVG Loader。
svg-sprite-loader
可以用來加載 svg：
install svg-sprite-loader 2.2 配置 svg-loader
Vue-cli 3 以上的版本，對 webpack 進行了高度封裝，要對 webpack 進行配置，需要在項目根路徑下(與 src 同級)建立配置檔案：
vue.config.js
，在該檔案中配置 svg loader。
vue.config.js
const path = 3 SVG 封裝
後面我會将自己封裝的元件庫，拆分成獨立的工程(類似 Element UI、Ant Design Vue 等)，釋出 npm 或私服後，通過 npm install 進行安裝，便于複用。現在在元件庫開發階段，需要不斷疊代完善，為了友善調試測試，故先将元件庫放在目前工程的
src/components
目錄下。
3.1 封裝元件 svg-icon
在
src/components
目錄下建立目錄
ds-svg-icon
, 在該目錄中建立
index.vue
檔案。該元件提供兩個屬性：
| 屬性名 | 類型 | 屬性描述 |
|---|---|---|
| class-name | String | 該圖示的樣式類(與 HTML 中 |
| icon | String | svg 圖示檔案的名稱 |
為了編寫友善，父元件傳遞到 svg 元件時可以省略
icon-
, 在 svg-icon 中，通過計算屬性将這個字首
icon-
拼接上去。如：圖示名稱為 icon-home.svg， 使用元件時使用：
src/components/ds-svg-icon/index.vue:
注意：定義的每個元件都要指定
name
屬性，
name
屬性的值，與目錄名稱保持一緻。
3.2 封裝為插件
上面建立了 ds-svg-icon/index.vue， 随着開發的進行，後面還有很多元件，我們統一将其封裝為插件，每個工程需要使用時，在 main.js 全局引入即可。
在
src/components
目錄下建立
index.js
：
import DsSvgIcon 後續元件開發時，都在這個檔案中導入，并添加到數組
DSCompoents
中。
在
main.js
中引入元件庫，并使用：
import DSComponent 3.3 icons 目錄
在初始化工程的時候，已經建立了 src/icons 目錄。在該目錄下建立 svg 目錄，所有的 svg 檔案，都放在這個目錄中(
src/icons/svg
)，現在可以将之前下載下傳的首頁 svg 圖示拷貝到這個目錄下，将其重命名為
icon-home.svg
(說明：上面的配置約定 所有 svg 圖示都使用字首
icon-
)。
svg 圖示拷貝到
src/icons/svg
目錄下後還不能立即使用，需要加載它才行。使用一個 js 檔案統一全部加載：
src/icons/index.js
:
const allRequireSvg = 最後在
main.js
中引入這個 js：
import 3.4 main.js
到現在為止，main.js 全部代碼如下：
import Vue 4 測試使用元件
在 App.vue 檔案中，測試剛才編寫的
ds-svg-icon
元件：
重新開機服務，在浏覽器中能看到該圖示，則該元件 ok。
送出代碼：
add . 合并到 master 分支：
git checkout master 将本地分支分别全部推送到 Gitee 和 GitHub
git push -- 程式員搞藝術