在vue中使用SVG建立图标系统并且使用

首先我们先来学一下svg标签的基础知识，参考了阮一峰大神的网络日志，链接：http://www.ruanyifeng.com/blog/2018/08/svg.html

SVG 全称是可缩放矢量图，其他图像格式是基于像素处理，svg是属于对图像的形状描述，所以svg本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
svg和其他标签一样，可以直接插入到html中使用，然后通过css、js对其进行其他操作。

svg语法

SVG 代码都放在顶层标签

svg属性：
width和height指定元素的宽度和高度，如果不指定默认大小是300像素（宽） x 150像素（高）
viewBox属性呦4个值，分别是左上角的横坐标和纵坐标、视口的宽度和高度

SVG 的 CSS 属性与网页元素有所不同
fill：填充色
stroke：描边色
stroke-width：边框宽度

以下会列举在建立图标系统可能会用到的标签，其他标签可以去看http://www.ruanyifeng.com/blog/2018/08/svg.html

标签

标签用于制路径

d属性表示绘制顺序
M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径

标签

复制标签进行引用并渲染

href属性指定所要复制的节点，x属性和y属性是左上角的坐标。

标签

用于将多个形状组成一个组（group）

标签

用于自定义形状，它内部的代码不会显示，仅供引用

标签

用来对元素进行分组；它不会被直接显示，大概相当于定义一个模板，然后使用元素引用并进行渲染。

--------------------------------------分割--------------------------------------

以上回顾了svg的基本知识，那么我们现在来思考一下怎么来做一个图标库。
1、因为svg是对图象的路径进行描述，实际项目中的图标都是比较复杂的，很少是标准的圆形矩形等，这个时候我们就需要path标签来描述图象。实际的图象的path我们自己去算是很复杂耗时的，我们可以让设计帮我们生成svg文件获得找到path。
阿里的iconfont更方便一点，下载一个图标，然后去js文件把css和html复制出来用就ok了

image.png

2.获得了path之后 我们需要确定图标系统的架构。
上面确定了以下的基本结构

3. 但是我们实际项目中图标系统里图标是单独个体，也就是说图标和图标之后是分离的，这个时候我们就想到了，结构变化成如下

4. 图标也可能是不同的标签进行组合，就比如是tab标签，那就想到了g标签，结构变化成如下

5. 到这里基本的一个图标系统已经建立好了，贴出一个完整的代码

为什么svg还要hidden，因为symbol只是不会显示，但是还是会占用空间，页面上会显示一大块空白。把svg隐藏即可解决这个问题。

6. 使用
   在项目入口导入svg图标库，然后在后面的页面中使用use引用图标渲染
   App.vue

import svgIcon from './components/common/svg';
export default {
    components:{
         svgIcon
    },
}

在需要使用图标的地方：