Vue 加载 svg icon

我们都知道SVG替代图片作为图标的好处，但如何能够方便的加载在VUE工程中呢；通过直接插入SVG代码方式画，当然是OK的，但这种方式是不是很LOW，一个两个还好，如果icon太多了，那就不好管理了；

咋样才能更加友好便捷使用呢，这两天研究 2 种方式，原理都是提前加载 svg 模板到 body 中，然后在需要用到的 svg icon 的地方，用 use 标记去实例化对应的 svg ；见：http://know.webhek.com/svg/svg-symbol.html；

使用icon font等CDN方式在线加载:

好处是不用下载到本地，不用管理svg文件，方便那是真的；

坏处就是如果我们需要 icon fillColor 根据 currentColor 更改而更改的话，就不好使了，因为通常来将，加载的 svg 都是有 fillColor 的，此时在引用的地方，使用 fill color 是无效的，如下图；所以可能需要准备多套资源，增加工作量，且资源多了也会对内存和加载速度有影响；当然也可以准备不带 fill 的资源，iconfont 官网说明里给了一个不带fill的链接，我自己反正是不知道怎么弄到 iconfont 上去；

image

使用svg-sprite-loader等插件本地加载

好处当然是可以定制啦，多色也没问题，只是可能需要打开文件，去掉部分 fill 属性；这样在外面传入的 fill 才能生效；

坏处当然是要本地维护这些资源了，而且需要搞定一些配置，才能快乐使用，这配置是真的没那么简单，这个后面我会讲到；

---

下面我就讲讲如何使用吧

1、使用 iconfont 等 CDN 链接方式加载模板；

前面说了，这个是真的简单方便

首先，默认在 iconfont 上的账户有资源啦；选择 Symbol，复制链接加到你的项目中；

image

image

项目 run 起来后，在 body 中可以看到加载好的模板；

image

然后在需要使用的地方，插入代码

代码中#iconzu91-copy为模板中对应的 symbol id 值；加载的效果如下：

image

是不是超简单；

2、使用 svg-sprite-loader 等插件方式加载；

• 首先当然是安装插件了，npm install svg-sprite-loader -D

• 第 2 步，下载svg 放到工程目录下，我是放在这里的，大家随意，开心就好；

image

• 第 3 步，批量引用 svg 文件；

  在 svgicons 下新建一个 index.js，加入如下代码

const context = require.context(".", false, /\.svg$/);
const requireAll = (requireContext) => {
  return requireContext.keys().map(requireContext);
};
requireAll(context);

webpack 关于 require.context 的解释，可以看一下；
我就不解释了，水平有限，还是看官方文档吧；

• 第 4 步，配置 webpack 下模块加载配置，配置的目的是要让 svg-sprite-loader 将对应的 svg 文件的模板编译加载到body中

配置要分两种情况，看工程是用 vue cli 2 还是 3 及以上创建的了；

cli2 的配置如下（cli3 的可以直接跳到 **cli3配置 **）

需要在 webpack.base.conf.js 中的 module 下的 rules 下添加如下配置

{
        test: /\.svg$/,
        loader: "svg-sprite-loader",
        include: [resolve("src/assets/svgicons")],
        options: {
          symbolId: "svg-[name]"
        }
}

这个意思是说，我们用 svg-sprite-loader 这个插件去加载 src/assets/svgicons 文件夹下所有的以 .svg 结尾的文件，并且模板中 symbol id 是以 svg- 开头，文件名称结尾；当然，这个前缀要不要都行；

注意，rules 中，可能还有其他的 loader 会去处理 svg 的，我们可以在对应的插件 loader 下配置exclude: [resolve("src/assets/svgicons")]，如我这里需要配置，这样 url-loader 就不会去处理编译对应文件加下的文件了；

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        exclude: [resolve("src/assets/svgicons")],
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
}

完了后，就可以run 起来，然后就可以看到 body 中已加载好了模板；

body 中 svg 模板.PNG

cli3及以上的配置如下（cli2 的可以跳过这一步）

首先在根目录新建 vue.config.js 文件，

这个地方解释一下，配置同 cli2，只不过这里看起来是没有在 cli2 中显得那么直观；

下面拆解下我自己是如何配置这部分的
首先到 node_modules/@vue/cli-service/lib/config/base.js 下查看默认配置

webpack base rules.PNG

可以看到，默认处理 svg 文件的是 file-loader，这里我们把默认的svg的配置里加一个 exclude，同 cli2 中配置，这样 file-loader 和 我们将要设置的 svg-loader 就不会重复处理我们的src/assets/svgicons 下的 svg 文件；当然，我们也可以覆盖svg rule，这样所有的 svg 文件就会采用我们覆盖的 loader 去处理 svg 文件；

新建一个规则配置

/* eslint-disable */
const path = require("path");// @ts-ignore
/* eslint-enable */

function resolve(dir) {
  // 路径可能与你的项目不同
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: (config) => {
    // exclude 配置默认的 svg 规则下不处理对应我定义的文件夹下的 svg 文件
    config.module.rule("svg").exclude.add(resolve("src/assets/svgicons")).end();
    // 新建一个 svgIcon rule，配置它的加载方式
    config.module
      .rule("svgIcon")
      .test(/\.svg$/)
      .use("svg-sprite")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "svg-[name]",
      })
      .end()
      .include.add(resolve("src/assets/svgicons"))
      .end();
  },
};

覆盖配置如下

module.exports = {
  chainWebpack: (config) => {
    // 先清除 uses，否则 svg 文件就会先被默认的 fileloader 处理一次，然后再被 svg-sqrite-loader 再处理一次
    config.module.rule("svg").uses.clear();
    config.module
      .rule("svg")
      .test(/\.svg$/)
      .use("svg-sprite")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "svg-[name]",
      })
      .end()
      .include.add(resolve("src/assets/svgicons"))
      .end();
  },
};

完了后，就可以run 起来，然后就可以看到 body 中已加载好了模板；

body 中 svg 模板.PNG

• 第 5 步，看疗效：

在需要使用 svg icon 的地方加入如下代码

成功加载

image

后面我会再研究下 vue-svg-loader 加载 svg icon