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" />