首先我们先来学一下svg标签的基础知识，参考了阮一峰大神的网络日志，链接：http://www.ruanyifeng.com/blog/2018/08/svg.html
SVG 全称是可缩放矢量图，其他图像格式是基于像素处理，svg是属于对图像的形状描述，所以svg本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
svg和其他标签一样，可以直接插入到html中使用，然后通过css、js对其进行其他操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg id="mysvg" viewBox="0 0 800 600">
<circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
</body>
</html>
svg语法
<svg>标签
SVG 代码都放在顶层标签<svg>之中。如：
<svg id="mysvg" viewBox="0 0 800 600">
<circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
svg属性：
width和height指定元素的宽度和高度，如果不指定默认大小是300像素（宽） x 150像素（高）
viewBox属性呦4个值，分别是左上角的横坐标和纵坐标、视口的宽度和高度
SVG 的 CSS 属性与网页元素有所不同
fill：填充色
stroke：描边色
stroke-width：边框宽度
以下会列举在建立图标系统可能会用到的标签，其他标签可以去看http://www.ruanyifeng.com/blog/2018/08/svg.html
<path>标签
标签用于制路径
<svg width="300" height="180">
<path d="
M 18,3
L 46,3
L 46,40
L 61,40
L 32,68
L 3,40
L 18,40
Z
"></path>
</svg>
d属性表示绘制顺序
M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径
<use>标签
复制标签进行引用并渲染
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>
href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。
<g>标签
用于将多个形状组成一个组（group）
<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
<defs>标签
用于自定义形状，它内部的代码不会显示，仅供引用
<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
<symbol>标签
用来对元素进行分组；它不会被直接显示，大概相当于定义一个模板，然后使用<use>元素引用并进行渲染。
<svg style="display: none;">
<symbol viewBox="0 0 24 24" id="heart">
<path fill="#E86C60"
d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</symbol>
</svg>
<svg>
<use xlink:href="#heart"/>
</svg>
--------------------------------------分割--------------------------------------
以上回顾了svg的基本知识，那么我们现在来思考一下怎么来做一个图标库。
1、因为svg是对图象的路径进行描述，实际项目中的图标都是比较复杂的，很少是标准的圆形矩形等，这个时候我们就需要path标签来描述图象。实际的图象的path我们自己去算是很复杂耗时的，我们可以让设计帮我们生成svg文件获得找到path。
阿里的iconfont更方便一点，下载一个图标，然后去js文件把css和html复制出来用就ok了
2.获得了path之后 我们需要确定图标系统的架构。
上面确定了以下的基本结构
<svg>
<path></path>
</svg>
- 但是我们实际项目中图标系统里图标是单独个体，也就是说图标和图标之后是分离的，这个时候我们就想到了<symbol>，结构变化成如下
<svg>
<symbol>
<path></path>
</symbol>
</svg>
- 图标也可能是不同的标签进行组合，就比如是tab标签，那就想到了g标签，结构变化成如下
<svg>
<symbol>
<path></path>
</symbol>
<symbol>
<g>
<line></line>
<circle></circle>
......
</g>
</symbol>
</svg>
- 到这里基本的一个图标系统已经建立好了，贴出一个完整的代码
<template>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
<symbol viewBox="0 0 28 33" id="user">
<path fill-rule="evenodd" d="" class="path1"></path>
</symbol>
<symbol viewBox="0 0 28 33" id="location">
<g fill-rule="evenodd">
<path d="" class="path1"></path>
<path d="" class="path2"></path>
</g>
</symbol>
<symbol id="star" viewBox="0 0 32 32">
<path class="path1" d=""></path>
</symbol>
<symbol viewBox="0 0 32 32" id="backtop">
<g fill-rule="evenodd">
<circle cx="16" cy="16" r="15" stroke="#999" stroke-width="0.6" fill="none"/>
<line x1="16" y1="10" x2="16" y2="21" style="stroke:#999;stroke-width:0.8"/>
<line x1="10" y1="10" x2="22" y2="10" style="stroke:#999;stroke-width:0.8"/>
<path d="M9.5 18 L16 10 L22.5 18" style="stroke:#999;stroke-width:0.8;fill:none"/>
<text x="10" y="27" style="font-size:6px;fill:#999;font-weight:700;">顶部</text>
</g>
</symbol>
<symbol viewBox="0 0 33 32" id="default">
<path fill="#3b87c8" d=""></path>
</symbol>
<symbol viewBox="0 0 32 32" id="distance">
<path fill="#2a9bd3" d=""></path>
<path fill="#2a9bd3" d=""></path>
</symbol>
<symbol viewBox="0 0 32 32" id="price">
<path fill="#e6b61a" d=""></path>
</symbol>
<symbol viewBox="0 0 33 32" id="rating">
<path fill="#eba53b" d=""></path>
</symbol>
</svg>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
为什么svg还要hidden，因为symbol只是不会显示，但是还是会占用空间，页面上会显示一大块空白。把svg隐藏即可解决这个问题。
- 使用
在项目入口导入svg图标库，然后在后面的页面中使用use引用图标渲染
App.vue
<svg-icon></svg-icon>
import svgIcon from './components/common/svg';
export default {
components:{
svgIcon
},
}
在需要使用图标的地方：
<svg class="arrow_right">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#price"></use>
</svg>
