Vue使用svgo loader & svg sprite loader

• svgo loader 大幅压缩svg大小
• svg sprite loader 将svg写入html，然后组件方式引用

# 先安装一下
npm install svg-sprite-loader -D
npm install svgo-loader --save-dev

• 配置webpack.conf.js启用上面两个loader

module.exports = {
    ...
    module: {
      rules: [
        ...
        // 先svgo loader压缩svg
        // 然后svg sprite loader写入html
        {
          test: /.(svg)(?.*)?$/,
          use: [{
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]'
            }
          }, {
            loader: 'svgo-loader',
            // 自定义配置压缩规则，可以使用默认规则
            // 当前文件路径是.svg的文件夹，这里是 project-name/src/svg/xxx.svg
            // svg.config.js路径是 project-name/src/config/svgo.config.js
            options: {
              configFile: '../config/svgo.config.js'
            }
          }]
        }
        ...
}

• 配置svgo.config.js，自定义svg压缩规则，配置写法可以参考svgo#configuration

// 修改配置文件要生效的话要重启npm run dev，暂时不知道原因
// 这个配置文件怎么写可以参考：https://github.com/svg/svgo#configuration
module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        // 使用预设配置，并重写预设配置
        // 预设的配置可以参考：https://github.com/svg/svgo#default-preset
        overrides: {
          // 四舍五入保留一位小数，但是不知道是哪里的
          cleanupNumericValues: {
            floatPrecision: 1
          },
          // 将<path>中的数值四舍五入保留一位小数
          convertPathData: {
            floatPrecision: 1
          }
        }
      }
    },
    // 如果预设配置不包含，可以在这里启用，设置
    // 这里也可以覆盖预设配置
    // 具体可以设置什么可以参考：https://github.com/svg/svgo#built-in-plugins
    // 具体参数可以点击插件名Plugin查看，在源码里面看看注释，注释写有。如removeAttrs：https://github.com/svg/svgo/blob/main/plugins/removeAttrs.js
    // 参数具体怎么设置找一下exports.fn = (root, params) => {这个的注释
    {
      name: 'removeAttrs',
      params: {
        // 删除svg中所有 data-spm-anchor-id 和 class 属性
        attrs: ['data-spm-anchor-id', 'class']
      }
    },
    {
      name: 'cleanupListOfValues',
      // 四舍五入到指定精度 比如下面的设置：floatPrecision: 1
      // <svg viewBox="0 0 200.28423 200.28423" enable-background="new 0 0 200.28423 200.28423">
      // 四舍五入之后
      // <svg viewBox="0 0 200.3 200.3" enable-background="new 0 0 200.3 200.3">
      params: {
        floatPrecision: 1
      }
    }
  ]
}

• 配置完成，接下来就可以使用了
• 先引入，再use

<template>
  <div>
    <svg aria-hidden="true">
      <use xlink:href="#icon-static_笔_icon"></use>
    </svg>
  </div>
</template>

<script>
require('./svg/static_笔_icon.svg')
export default {
  data () {
    return {}
  },
  computed: {},
  created () {
    console.log('created')
  }
}
</script>

• 也可以一次性引入所有svg，写在项目的main.js（写哪都行）

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /.svg$/)
requireAll(req)

• 嫌麻烦可以写成组件方式使用，参考# svg-sprite-loader 使用教程