Vue引入iconfont图标，使用svg-icon

iconfont真是太好用了，之前一直使用font-class方式来引用，但是iconfont说Symbol 引用才是未来的主流，那么我们是一定要跟上主流的

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

在vue中使用Symbol引入貌似比font-class要复杂一些，但只要一次配置好，之后就很方便了。

Step1. 安装依赖svg-sprite-loader

cnpm i svg-sprite-loader --save

Step2. 配置vue.config.js

注意：网络上有些文章说在build/webpack.base.conf.js中写配置，不过现在项目一般使用vue-cli3生成，所以，并没有webpack.base.conf.js。当然vue-cli3生成的项目默认也没有vue.config.js文件，手动建立即可，文件位置和其他配置文件相同。

vue.config.js 可参考：https://cli.vuejs.org/zh/config/

// vue.config.js
const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}
// other code ...
module.exports = {
  // other code ...
  chainWebpack(config) {
    // set svg-sprite-loader
    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]"
      })
      .end();
  }
  // other code ...
};
// other code ...

Step3. 在scr中新建文件夹icons，并配置如下

注意：svg文件夹中存放的是单个图标svg文件，不是把iconfont购物车中的图标打包了那个svg文件。

// icons/index.js

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon"; // svg组件

// register globally
Vue.component("svg-icon", SvgIcon);

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /\.svg$/);
requireAll(req);

step4. 在main.js中引用

// main.js

import "./icons"; // icon

step5. 使用

icon-class的类名就是iconfont中下载的svg的文件名。
图标大小颜色可以在CSS中设置。

/* 使用 user.svg */

<svg-icon icon-class="user" />