介紹：

前端專案中總是會使用大量的icon圖示，我們也有很多辦法去使用icon圖示，比如在iconfont上下載字型庫，使用圖片等等。但是這些都有一個問題，icon圖示不夠直觀明瞭，不容易維護。現在給大家介紹一個元件：svg-icon。我這裡以Vue TypeScript專案來演示。

官網地址：前往

使用流程：

• 首先安裝我們需要安裝 vue-svgicon

  yarn add vue-svgicon
  

• 建立相關目錄
  1. 我們需要在專案中建立一個資料夾來儲存svg圖示。
  
  icons資料夾來存放資源
  svg目錄用來存放原始的svg資源
  components目錄用來存放轉換過的ts檔案
  2. 在package.json檔案配置命令將svg檔案轉換為ts檔案，
  "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6",
  
  - 使用
  1. 在main.ts 中引入相關依賴項
  import SvgIcon from 'vue-svgicon'
  2. 引入生成的components檔案地址
  import '@/icons/components'
  3. Vue匯入模組並配置相關選項如別名，樣式
  Vue.use(SvgIcon, { tagName: 'svg-icon', defaultWidth: '1em', defaultHeight: '1em' })
• Vue中使用
  <svg-icon name="password" />

總結

以上基本實現了svg-icon的使用，讓我們的專案更加可維護。