vue2.x搭建saas项目系列之五：svg icon统一管理

此篇幅主要介绍、我们是如何做svg icon的统一管理，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代

目录结构如图  

svg的文件可以从iconfont下载

这里主要介绍下如何配置的

1.安装vue-svgicon

npm install vue-svgicon -D

2.package.json scripts

"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 之后，可以通过执行 `npm run svg` 来重新生成所有组件 

5.项目中使用

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

到此，svg icon统一管理-文章结束，原创不易，感谢浏览！