首先我们先来学一下 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> 标签
path 是用来定义形状的通用元素，所有的基本形状都可以用 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> 标签
用来对元素进行分组；它不会被直接显示，大概相当于定义一个模板，然后使用
<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、获取 path
因为 svg 是对图象的路径进行描述，实际项目中的图标都是比较复杂的，很少是标准的圆形矩形等，这个时候我们就需要 path 标签来描述图象。实际的图象的 path 我们自己去算是很复杂耗时的，我们可以让设计帮我们生成 svg 文件获得找到 path。
阿里的 iconfont 更方便一点，下载一个图标，然后去 js 文件把 css 和 html 复制出来用就 OK 了
2、确定图标系统的架构
获得了 path 之后 我们需要确定图标系统的架构，上面确定了以下的基本结构。
<svg>
<path></path>
</svg>
3、变化一
但是我们实际项目中图标系统里图标是单独个体，也就是说图标和图标之后是分离的，这个时候我们就想到了 <symbol>，结构变化成如下
<svg>
<symbol>
<path></path>
</symbol>
</svg>
4、变化二
图标也可能是不同的标签进行组合，就比如是 tab 标签，那就想到了 g 标签，结构变化成如下
<svg>
<symbol>
<path></path>
</symbol>
<symbol>
<g>
<line></line>
<circle></circle>
......
</g>
</symbol>
</svg>
5、完成
到这里基本的一个图标系统已经建立好了，贴出一个完整的代码
<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 隐藏即可解决这个问题。
6、使用
在项目入口导入 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>
转载自 简书 super静_jingjing 的文章 在 vue 中使用 SVG 建立图标系统并且使用
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
