vue项目中自动导入svg并愉快的使用

引入图标的几种方式

1. 远古时代

   1. 一个个小图标png图片引入，代码中在一个个引用
   2. spirit图片，将多个图标放在一张png图片上，通过background属性显示对应的图标

2. iconfont时代

   将整个工程用到的图标，全部打包生成字体文件，在代码中全局引入，只要通过标签和class就能够使用

   缺点：

   1. 当新增图标的时候，需要重新生成字体文件，当团队开发的时候，新增图标就显得格外麻烦

3. svg时代

   优势：

   1. svg可以单独引入，不需要像iconfont一起打包
   2. 封装一个全局组件，就能像iconfont一样，传入class名称就能显示对应svg图标

   注意点：svg有兼容性问题，使用的时候先跟产品谈论清楚需求是否需要兼容ie

处理loader，对指定目录svg文件处理

1. 安装loader

    npm i svg-sprite-loader -D
   

2. 配置vue.config.js

   这里推荐一个vue指令，可以方便的查询vue隐藏的配置文件的loader规则

   vue inspect --rule svg

   接下来上配置文件

   找到vue.config.js 如果没有就新建一个

   const path = require("path");
   // 引入path模块
   const resolve = dir => path.join(__dirname, dir);
   
   module.exports = {
     ...,
     // 配置路径别名
     chainWebpack: config => {
       // vue inspect --rule svg  // 使用以上指令，可以获取vue配置的loader规则
       // svg loader 取消src/icons目录下的处理
       config.module.rule("svg").exclude.add(resolve("src/icons"));
       // 添加自定义loader规则 icons，只处理src/icons目录
       config.module
         .rule("icons")
         .test(/\.svg$/)
         .include.add(resolve("src/icons")) // 上下文变化
         .end() // 返回上下文
         .use("svg-sprite-loader")
         .loader("svg-sprite-loader")
         .options({ symbolId: "icon-[name]" });
     },
     ...
   };
   

   主要有以下几点

   1. 将svg默认规则绕开我们自定义的目录 src/icons
   2. 创建自定义规则icons，包含我们的自定义目录src/icons
   3. 配置svg使用名称规则， icon-[文件名]

接下来使用vue inspect看下目前的配置

1. vue inspect --rule svg

   /* 以下是我们修改后的svg loader规则 */
   /* config.module.rule('svg') */
   {
     test: /\.(svg)(\?.*)?$/,
     exclude: [
       '/Users/{UserName}/project/src/icons' /* 这个是不包含的目录 */
     ],
     use: [
       /* config.module.rule('svg').use('file-loader') */
       {
         loader: '/Users/{UserName}/project/node_modules/file-loader/dist/cjs.js',
         options: {
           name: 'img/[name].[hash:8].[ext]'
         }
       }
     ]
   }
   

2. vue inspect --rule icons

   // 以下是我们添加的icons loader规则
   /* config.module.rule('icons') */
   {
     test: /\.svg$/,
     include: [
       '/Users/{UserName}/project/src/icons' /* 这个是包含的目录 */
     ],
     use: [
       /* config.module.rule('icons').use('svg-sprite-loader') */
       {
         loader: 'svg-sprite-loader',
         options: {
           symbolId: 'icon-[name]'
         }
       }
     ]
   }
   

编写一个自定义组件

<template>
  <svg v-on="$listeners" :class="svgClass">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      default: ""
    },
    className: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    }
  }
};
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

入参有2个，iconClass(图标的名称)和className(自定义样式名称)

iconClass为src/icon下目录的svg文件名称

编写一个js，实现svg自动化

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
const isEnv = process.env.NODE_ENV === "development";
// 自动加载 icons 目录下的所有svg
const req = require.context("./svg", true, /\.svg$/);
const svgNameSet = new Set();
req.keys().map(url => {
  const pathSplit = url.split("/");
  const fileName = pathSplit[pathSplit.length - 1];
  isEnv && console.log(fileName);
  if (svgNameSet.has(fileName)) {
    isEnv && console.error("图标名称重复，请检查");
  } else {
    svgNameSet.add(fileName);
    return req(url); // 可以用于异步require
  }
});

// 全局注册SvgIcon.vue组件
Vue.component("svg-icon", SvgIcon);

这个脚本主要有以下几个内容

1. 全局注册SvgIcon.vue组件
2. 使用require.context("./svg", true, /\.svg$/);,对src/icons目录递归遍历，获取所有文件
3. 做一遍开发环境的重复提醒（因为这边使用的icon-[name]，name是唯一的，所以当有相同文件名称的svg，会被覆盖）

至此就可以愉快的使用svg了

使用方法如下

1. 将svg文件复制到src/icons目录下，比如diamond.svg
2. 在vue的template中直接使用 <svg-icon iconClass="diamond"></svg-icon>

是不是很简单，赶紧去试试吧

压缩优化

SVG通常会有一些冗余信息（如：fill=“red”, 还有可能导致无法修改颜色）导致影响体积，这里我们可以使用svgo-loader来进一步压缩

// install
npm i svgo-loader -D

// vue.config.js
// 接上面svg的配置
...
.end()
.use('svgo-loader')
.loader('svgo-loader')
.end()