在vue中使用svg sprite

概述

这几天研究了一下在vue中使用svg sprite，有些心得，记录下来，供以后开发时参考，相信对其它人也有用。

在vue中导入svg

在vue中导入svg的方法有很多种，比如在img标签的src属性中导入，但是这样就不能使用class改变svg的颜色。所以一般利用svg的use标签使用内联svg的方法导入。例如下面：

<svg>
  <use xlink:href="@/assets/sprite.svg#notification"/>
</svg>

使用这种方法需要注意一点，就是如果你想把路径写成变量的形式，下面的写法是行不通的：

<svg>
  <use :xlink:href="'@/assets/sprite.svg#notification'"/>
</svg>

因为vue没有解析里面的字符串，所以不能生成所需要的路径，而且，即使能够解析里面的字符串，也由于没有加上hash值导致解析不了。

解决方法是使用require生成相对路径。示例如下：

<svg>
  <use :xlink:href="`${require('@/assets/sprite.svg')}#notification`"/>
</svg>

需要注意的是，使用require的下面写法是不行的。因为路径中的#解析不了。

<svg>
  <use :xlink:href="require('@/assets/sprite.svg#notification')"/>
</svg>

使用svg雪碧图

如果svg图标有很多的话，会发出很多http请求，资源消耗量很大。这个时候最好把svg做成雪碧图。一般情况下，我们手动把要做成雪碧图的svg文件编上id，全部放到一个svg文件比如sprite.svg文件里面去，然后用如下方式引用就可以了(其中notification是引用的svg的id)：

<svg>
  <use xlink:href="@/assets/sprite.svg#notification"/>
</svg>

上面的方法看起来很完美，但是有一个很严重的缺点，它的svg雪碧图是存在内存里面的，所以在切换路由的时候，svg雪碧图就没有了，需要重新下载这个svg雪碧图。很浪费资源啊。

改进方案

参考svg-sprite-loader实现加载svg自定义组件和VUE-cli3使用 svg-sprite-loader可以看到，可以利用svg-sprite-loader来做svg雪碧图。但是都需要修改webpack的loader配置。

webpack-chain

vue-cli内部是利用webpack-chain插件修改webpack配置的，这是源码。外部也只能在vue.config.js里面利用webpack-chain来修改webpack配置。

具体的使用方法可以参考：webpack-chain文档和webpack-配置-module

但是这里有一个坑，就是怎么按条件修改loader配置，比如在某个文件夹使用一种loader，在其它文件夹使用其它loader。看了半天文档，我最后发现，可以用oneOf来实现，其中oneOf(name)的name是自定义的，随便写语义化的名称就行。webpack-chain里面的oneOf和webpack配置里面的oneOf是对应的。实例如下：

module.exports = {
  chainWebpack: config => {
    const resolve = dir => path.join(__dirname, dir);
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .test(/\.svg$/)
      .oneOf('normal')
      .exclude
        .add(resolve('src/assets/svg-sprite'))
        .end()
      .use('file-loader')
        .loader('file-loader')
        .end()
      .end()
      .oneOf('sprite')
      .include
        .add(resolve('src/assets/svg-sprite'))
        .end()
      .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'sprite-[name]'
        });
  }
};

还有一个坑就是end方法的使用，在适当的嵌套中需要加end方法返回上一层，否则后面的语句不会执行。

实现svg雪碧图

具体可以参考我写的yi-svg-sprite插件;

解释一下相关的原理和配置：

原理是利用svg-sprite-loader自动形成一个大的svg雪碧图内嵌到app的html里面，然后只需要在其它地方使用id引用里面的svg片段即可。

vue.config.js里面的操作是删除vue-cli里面对svg的loader处理，然后加上自己对svg的loader处理：在svg-sprite文件夹里面使用svg-sprite-loader，在其它文件夹里面使用file-loader(抄的vue-cli原配置);

main.js里面的操作是导入yi-svg-sprite库，并且把svg-sprite文件夹里面的svg文件组装成一个svg雪碧图，id是各自的文件名。

其它svg-sprite库

后来我才发现，已经有很多svg-sprite库了，下面对它们一一评价：

vue-svg-sprite：这个svg sprite库使用directive让人眼前一亮，但是它仍然有在切换路由的时候会重新加载svg雪碧图的缺点。
vue-cli-plugin-svg-sprite: 这个svg sprite库看起来很完美，也是包装的svg-sprite-loader，但是配置项太多，担心出现其它问题，而且好像没有维护了。