SVG sprite

之前说过icon-fonts解决方案可以一次性加载纯色图标，并且相对于精灵图更小更灵活；那渐变色或者组合颜色的图标怎么办呢，答案之一就是svg

• svg是矢量图像，可以无限缩放，而且图像质量不会下降
• svg图像比 jpg 或 png 图像更灵活，我们可以使用 CSS 和 JavaScript 与它们进行交互，比如在css中用fill属性控制svg颜色
• svg基本上可以放心使用，除非你要用在IE8或老版本安卓机中；推荐一个兼容性查询网站
  svg兼容性.png
• SVG Sprite技术，这里所说的Sprite技术就是类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。

实际上就是把所有的当前页面用到的svg使用symbol标签都放在一个svg中加载到body顶部，使用的时候再用use标签的xlink:href="#xxx"根据symbol的id调用

安装依赖

• 读取svg信息，去除svg中的无用标签，精简结构
  npm install svgo svgo-loader --save-dev

• SVG Sprite插件
  npm install svg-sprite-loader --save-dev

配置webpack

webpack.base.conf.js(webpack的基础配置文件，也可能是别的名)找到rules那个数组，配置完重启一下服务

rules: [
  ...
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    exclude: [resolve('src/assets/icons')], // 去除你存放svg的那个文件夹，改用svgo-loader处理
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.svg$/,
    use: [
      {loader: 'svg-sprite-loader', options: {}},
      {loader: 'svgo-loader', options: {
         plugins: [
            // 还有很多配置，具体可以查看https://github.com/svg/svgo
           { removeViewBox: false },
           { removeXMLNS: true }
          ]
        }
       }
    ],
    include: [resolve('src/assets/icons')] // 把上面去掉的文件夹include进来
  }
]

写个vue组件

写完注册一下

<template>
  <svg class="gf-icon" version="1.1" :width="currentSize.width" :height="currentSize.height" :viewBox="box">
    <use :xlink:href="icon.id" />
  </svg>
</template>

<script>
  export default {
    name: 'svgIcon',
    props: {
      name: {
        type: String,
        required: true
      },
      size: {
        type: [Number, String],
        default: 10
      },
      height: {
        type: [Number, String],
        default: null
      },
      width: {
        type: [Number, String],
        default: null
      }
    },
    data () {
      return {
        xml: null
      }
    },
    async created () {
      if (!this.name) {
        return
      }
      this.xml = await import(/* webpackMode: 'lazy-once', webpackChunkName: 'icon-svg' */ '@/assets/icons/' + this.name + '.svg')
    },
    computed: {
      baseSize () {
        let size = this.size
        size = Number(size)
        if (isNaN(size) || size <= 0) {
          return 10
        }
        return size
      },
      icon  () {
        if (!this.xml) {
          return {
            width: 0,
            height: 0,
            id: ''
          }
        }
        let viewBox = this.xml.default.viewBox.split(' ')
        return {
          width: viewBox[2] || 0,
          height: viewBox[3] || 0,
          id: '#' + this.xml.default.id
        }
      },
      box () {
        return `0 0 ${this.icon.width} ${this.icon.height}`
      },
      scale () {
        if (this.icon.height) {
          return this.icon.width / this.icon.height
        }
        return 1
      },
      currentSize () {
        let height = this.height
        let width = this.width
        // 不传递 width 与 height，就当做正方形处理，size 字段生效
        // 否则就按比例处理
        if (height === null && width === null) {
          return {
            width: 1 * this.baseSize,
            height: 1 * this.baseSize
          }
          // 指定了宽度，按宽度比例计算
        } else if (width !== null) {
          width = Number(width)
          if (isNaN(width) || width <= 0) {
            width = 1 * this.baseSize()
          }
          return {
            width: width,
            height: width / this.scale
          }
          // 指定了高度，按高度比例计算
        } else {
          height = Number(height)
          if (isNaN(height) || height <= 0) {
            height = 1 * this.baseSize
          }
          return {
            width: height * this.scale,
            height: height
          }
        }
      }
    },
    watch: {
      async name (val) {
        if (!val) {
          return
        }
        this.xml = await import(/* webpackMode: 'lazy-once', webpackChunkName: 'icon-svg' */ '@/assets/icons/' + this.name + '.svg')
      }
    }
  }
</script>

<style>
  .gf-icon {
    display: inline-block;
    fill: currentColor;
  }
</style>

使用

先存个svg到src/assets/icons这个文件夹，比如叫star.svg，然后就可以在任意文件使用刚才写的组件辣。

<svg-icon name="star" size="20"></svg-icon>