Vue项目配置（引入iconfont图标）

  前几天被同事问到，项目中如何使用图标，当时脑袋里第一想法是使用iconfont。
  以前我使用iconfont时候，要么是直接下载的png等格式图片，或者直接下载的代码，然后
  打包到项目中，每次要改变图标的话，还要重新折腾一遍，就很麻烦，今天我总结了一份
  在开发vue项目中使用图标的方式，维护起来很轻松的方法，分享给大家！

项目配置过程

+1）创建vue.config.js，指定应用上下文、端口号、主页title

// vue.config.js
const port = 7070;
const title = "vue实践";
module.exports = {
publicPath: '/best-practice', // 部署应用包时的基本 URL devServer: {
    port: port,
  },
configureWebpack: {
// 向index.html注入标题 name: title
} };

+2）链式操作:svg icon引入

安装依赖:svg-sprite-loader
npm i svg-sprite-loader -D

+3）下载图标，存入src/icons/svg中,修改规则和新增规则，vue.config.js

// resolve定义一个绝对路径获取函数 
const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
}
//...
chainWebpack(config) {
// 配置svg规则排除icons目录中svg文件处理 
    config.module
    .rule("svg") .exclude.add(resolve("src/icons")) .end();
    // 新增icons规则，设置svg-sprite-loader处理icons目录中的svg 
    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();
 }

+4） 图标自动导入

// icons/index.js
const req = require.context('./svg', false, /\.svg$/) req.keys().map(req);
// main.js
import './icons'

+5）创建SvgIcon组件，./components/SvgIcon.vue