vue-cli3项目如何引入iconfont（项目中已有svg-sprite-loader导致一直报错）

一、图标下载

1. 登录阿里巴巴iconfont网站将需要用到的图标加入购物车，如下图所示。
   
2. 选好后点击“添加至项目”，如下图所示。
   
3. 进入“图标管理”，选择“Font class”（若需修改图标名称，鼠标移入图标点击编辑图片进行修改），下载图标至本地，如下图所示。

二、引入项目中

1. 在项目中的assets目录中新建文件夹“iconfont”，将已下载的图标文件解压到该目录中，如下图所示。
   
2. 在main.js中全局引入，如下图所示。
   
3. 使用，图标名称在iconfont.css文件中可找到，如下图所示。
   
   路由
   
   侧边导航栏
   
   三、其他
   因为项目中已存在svg-sprite-loader，再引入iconfont报错。
   
   修改vue.config.js文件，在module.exports下添加如下代码，可解决。

chainWebpack: config => {
	config.module
    .rule('svg')
    .exclude.add(resolve('src/icons'))
    .end();

    config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(resolve('src/icons'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]'
    });
}