目前UI交付的设计稿越来越多地使用svg，而不是提供二倍图、双色png了。这里通过配置 vue，来实现引用svg，也支持hover变色。

SVG特点

svg VS 双倍图、双色图（也就是普通状态和选中状态）

其实 icon-font这篇文章已经提到了：

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。

  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

  • 兼容性较差，支持 ie9+,及现代浏览器。

  • 浏览器渲染svg的性能一般，还不如png。

UI通过 sketch 等UI设计工具导出的 svg 也会包含一些 meta冗余信息也需要去除

Vue配置

在vue中配置 svg，需要以下步骤：

1. 安装依赖

  1. npm install svg-sprite-loader svgo svgo-loader -D

分别是：

  • svg-sprite-loader 把svg合并成精灵图方便查找svg图片
  • svgo 自定义svg，开去除meta fill信息

2. 配置

修改项目中的 vue.config.js ：

  1. const svgSpritePlugin = require('svg-sprite-loader/plugin');
  3. var config = {
  4.     chainWebpack(config) {  
  5.         const svgDirectoray = path.resolve(__dirname, 'src/assets/svg');
  7.     // 忽略svg目录
  8.     config.module.rule('svg')
  9.       .exclude.add(svgDirectoray);
  11.     //  补充svg规则
  12.     config.module.rule('svg-icons')
  13.       .test(/\.svg$/)
  14.       .include.add(svgDirectoray).end()
  15.       .use('svg-sprite-loader')
  16.       .loader('svg-sprite-loader')
  17.       .options({
  18.       // extract: false,
  19.       symbolId: '[name]'
  20.     }).end()
  21.       .use('svgo-loader').loader('svgo-loader')
  22.       .tap(options => ({
  23.       ...options, plugins: [
  24.         {
  25.           removeAttrs: {
  26.             attrs: 'fill'
  27.           }
  28.         }
  29.       ]
  30.     }))
  31.       .end();
  33.     //  引入插件
  34.     config.plugin('svg-sprite')
  35.       .use(svgSpritePlugin, [{
  36.         plainSprite: true
  37.       }]);  
  38.     }
  39. }

辅助注释可以看到：

  • 取消对 svg目录的解析
  • 补充svg后缀解析，并且移除meta信息

以上准备完毕

  1. // 记得 引入
  2. import '@/assets/svg/sad.svg';
  1.  <svg fill="red">
  2.    <use xlink:href='#sad'/>
  3. </svg>

image.png

3. 进一步封装

思路是

  • 默认引入 文件夹下所有svg
  • 封装 fill 的触发效果
  • prop 设置 fill defaultColor hoverColor