配置项目

阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用

创建SvgIcon组件

创建icons文件夹

src跟目录下创建icons文件夹，里面创建svg文件夹和index.js文件

index.js

main.js中引入

import'./icons'

npm install svg-sprite-loader --save

cnpm i svg-sprite-loader --save

配置文件

在webpack.base.conf.js文件中，加入

并在以下设置中添加exclude: [resolve('src/icons')],,如下所示

使用

这样就可以在.vue页面中直接使用.svg文件了。使用.svg文件的名称，通过icon-class属性来引用。