VUE-cli3使用 svg-sprite-loader

svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，接下来就可以在模版中方便地使用 svg-sprite 技术了。

使用 svg-sprite 的好处

如果不知道 svg-sprite 是什么，可以参考大神张鑫旭的文章： 未来必热：SVG Sprite技术介绍

• 页面代码清爽
• 可使用 ID 随处重复调用
• 每个 SVG 图标都可以更改大小颜色

安装插件

npm install svg-sprite-loader --save-dev复制代码

webpack 配置,在Vue.config.js加入处理 svg 的 loader：

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
    //const svgRule = config.module.rule('svg')
    //svgRule.uses.clear()
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons')) //处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  configureWebpack: () => ({
    // resolve: {
    //   alias: require('./alias.config').webpack
    // }
    // module: {
    //   rules: [{
    //     test: /\.svg$/,
    //     use: [{
    //       loader: "svg-sprite-loader",
    //       options: {
    //         symbolId: 'icon-[name]'
    //       }
    //     }]
    //   }]
    // }
  })
}
复制代码

这时候发现还是不行啊， body 中并没有看到 symbol 标签。

就是说只有我们自己引入的 svg 文件需要经过 svg-sprite-loader，那么就将这些 svg 统一放到一个目录下，我这里放到了 src/icons

然后要在用到的地方引入需要的svg

import './src/icon/target.svg';复制代码

重新启动项目，终于在 html 中看到了 symbol 标签！

配置好了，就可以用了。使用方法很简单，相较于原来插入 svg 图标的方法（img src 或将 svg 整个写入 html），用 svg-sprite 更加简单且清爽：

1
复制代码

<svg><use xlink:href="#target" /></svg>
复制代码

嗯，就这样短短一行。 xlink:href 中传入 svg ID 就好了，由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID，所以这里传入的 ID 即为你想显示的图标的 svg 文件名，记得加上 # 。

自动导入

你会发现，这里要想插入某个图标，都得 import ，每用一个都要重复一遍这个流程，太麻烦，那么我们就让 src/icons/svg/下的 svg 文件都自动导入吧。

webpack 可以帮我们做到：

// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);

// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);复制代码

代码实例:

首先在main.ts中引入import './icons/index',

icons/index.js,将icons/svg中的所有svg导入并注册全局组件SvgIcon

//SvgIcon组件代码

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    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>复制代码

接下来就可以使用组建了

关于 require.context 的详细用法，可以参考 webpack 文档：dynamic requires

这样一来，每当我们修改或增加新的 svg，只要将文件往这个目录下一扔，插件就会自动帮我们生成相应的 symbol 标签啦，接下来就只管用吧