svg精灵图

一、svg精灵图

利用svg的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol。

1.使用svg精灵图

简单理解使用步骤可以分为三步
1.声明精灵图（类似于一个容器，他在页面中占位，所以用display：none隐藏）。
2.svg标签改成symbol，就变为了精灵图的一个元件，在元件上声明id属性。
3.根据id调用精灵图中的svg。

    <!-- 1.声明精灵图 -->
    <svg style="display:none;">
        <!-- 2.svg标签改成symbol 就变为了精灵图的一个元件 在元件上声明id属性 -->
        <symbol id="one" width="130" height="130" xmlns="http://www.w3.org/2000/svg">
            <path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/>
        </symbol>
        <symbol id="two" width="128" height="128" xmlns="http://www.w3.org/2000/svg">
            <path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/>
        </symbol>
    </svg>
    <!-- 3.根据id调用精灵图中的svg -->
    <svg>
        <use xlink:href="#one" ></use>
    </svg>
    <svg>
        <use xlink:href="#two" ></use>
    </svg>

3.优化

以上的操作方式是我们自己手动生成的精灵图，使用use调用精灵图。我们使用起来就不太方便，这时候我们就可以使用webpack的工具。svg-sprites-loader自动生成(默认会将文件名称作为id名称)。

// 将svg中的文件生成精灵图
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

就可以这样使用了

    <svg>
      <use xlink:href="#icon-404" />
    </svg>

组件化使用
写成组件，属性绑定加上计算属性就可以任意使用

<template>
  <svg :class="svgClass">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
  export default {
    name: 'icon',
computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
 }
</script>

导入并注册全局组件

import Vue from 'vue'
// 导入svgIcon组件对象
import SvgIcon from '@/components/SvgIcon'// svg component

// 注册全局组件
Vue.component('svg-icon', SvgIcon)

// 将svg中的文件生成精灵图
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

使用

 <svg-icon icon-class="404" />