技術標籤：vue2.xvuesaas專案架構

此篇幅主要介紹、我們是如何做svg icon的統一管理，如有不足和建議請留言，在此感謝，專案目前階段還處在少年，一直在迭代

目錄結構如圖

svg的檔案可以從iconfont下載

這裡主要介紹下如何配置的

1.安裝vue-svgicon

npm install vue-svgicon -D

2.package.jsonscripts

"svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6"

3.main.ts 引入

// svg
import SvgIcon from 'vue-svgicon'
Vue.use(SvgIcon, {
  tagName: 'svg-icon',
  defaultWidth: '2em',
  defaultHeight: '2em'
})
 

4.每當在`icons/svg`資料夾內新增icon之後，可以通過執行`npmrunsvg`來重新生成所有元件

5.專案中使用

<svg-icon
   class="mt-3"
   name="invertedTriangle"
   width="11" 
   height="8"
 />

到此，svg icon統一管理-文章結束，原創不易，感謝瀏覽！