前言

在做前端后台项目的时候经常会用到很多 icon 图标，刚开始还好，但随着项目的不断迭代，每次修改添加图标会变得很麻烦，而且总觉得不够优雅，于是开始琢磨着有啥简单方便的工作流呢？

icon演变史

• 炼气期：雪碧图image sprite，所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 background-position 定位显示不同的 icon 图标。但这个也有一个很大的痛点，维护困难。每新增一个图标，都需要改动原始图片，还可能不小心出错影响到前面定位好的图片，而且一修改雪碧图，图片缓存就失效了，久而久之你不知道该怎么维护了。

• 筑基期：font库Font Awesome，无法自定义制定图标，只能用别人的。

• 结丹期：阿里爸爸开源图库iconfont，三种使用方式：

  • unicode：原理是CSS3特性@font-face，具体使用看文档！
  • font-class：原理是CSS3特性@font-face，具体使用看文档！
  • symbol：原理是SVG Sprite，具体使用看下文！

• 大乘期：上述方式都会，然后，根据不同的场景使用不同的方式！！！

vue-cli3中配置并使用iconfont

• 第一阶段：创建 icon-component 组件

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

//引入svg组件
import IconSvg from '@/components/IconSvg'

//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

//在代码中使用
<icon-svg icon-class="password" />

• 第二阶段：使用 webpack插件svg-sprite-loader，将多个 svg 打包成 svg-sprite。

为什么要打包svg？

现在所有的 svg-sprite 都在 iconfont.js 里面，皱巴巴的一块，很不直观。最关键是，无法做到按需加载，自定义性太差了，添加也麻烦。

svg-sprite-loader和url-loader冲突了怎么办？
最安全合理的做法是使用 webpack 的 exclude 和 include ，让svg-sprite-loader只处理你指定文件夹下面的 svg，url-loaer只处理除此文件夹之外的所以 svg，这样就完美解决了冲突的问题。

• vue.config.js配置如下：

const path = require("path");

function resolve(dir) {
    return path.join(__dirname,dir)
}


module.exports = {
    // 配置webpack
    chainWebpack: (config) => {
        // 配置url-loader: 让url-loader对src/assets/svg目录下的svg图片不做处理
        config.module.rule("svg").exclude.add(resolve('src/assets/icons/svg')).end();

        // 配置svg-sprite-loader：让svg-sprite-loader对src/assets/svg目录下的svg图片不做处理
        config.module.rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons/svg'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end();
    }
}

• 使用到 webpack 的 require.context，实现自动导入：

require.context("./test", false, /.test.js$/);
这行代码就会去 test 文件夹（不包含子目录）下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
更直白的说就是 我们可以通过正则匹配引入相应的文件模块。

require.context有三个参数：

• directory：说明需要检索的目录
• useSubdirectories：是否检索子目录
• regExp: 匹配文件的正则表达式

import Vue from 'vue'

import IconSvg from "@/components/iconfont/IconSvg.vue";
Vue.component('icon-svg', IconSvg)

// 自动导入svg
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req);

• 具体使用：按需添加svg -> 使用

  
  按需添加路径.png

// 直接使用全局组件，iconClass属性写文件名
<icon-svg iconClass="recharge"/>

第三阶段：优化
了解svg sprites技术——移步张大大博客
压缩SVG——移步张大大博客

#完结

鸣谢，花裤衩大大、张鑫旭大大，还有我自己。