封装svg字体图标封装svg字体图标

前言

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

icon演变史

炼气期：雪碧图image sprite，所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 background-position 定位显示不同的 icon 图标。但这个也有一个很大的痛点，维护困难。每新增一个图标，都需要改动原始图片，还可能不小心出错影响到前面定位好的图片，而且一修改雪碧图，图片缓存就失效了，久而久之你不知道该怎么维护了。
筑基期：font库Font Awesome，无法自定义制定图标，只能用别人的。
【封装svg字体图标】结丹期：阿里爸爸开源图库iconfont，三种使用方式：
- unicode：原理是CSS3特性@font-face，具体使用看文档！
- font-class：原理是CSS3特性@font-face，具体使用看文档！
- symbol：原理是SVG Sprite，具体使用看下文！
大乘期：上述方式都会，然后，根据不同的场景使用不同的方式！！！

vue-cli3中配置并使用iconfont

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

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

//引入svg组件 import IconSvg from '@/components/IconSvg'//全局注册icon-svg Vue.component('icon-svg', IconSvg)//在代码中使用

第二阶段：使用 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);