前端项目如何使用svg矢量图

不管我们是在做web项目还是后台管理类的项目时，都会用到各种各样的图标，对于图标我们可能会采用切图的方式来实现，但是切图是图片会有这样的问题：

1、页面放大会导致图片放大会变的模糊

2、如果页面中的图片过多的话会造成有很多请求也就代表页面加载慢。

所以基于以上问题我们一般使用svg的矢量图，矢量图一般由设计师提供给前端来转换成字体图标，在项目中使用。

优点：1、放大不会模糊 2、只加载一次不会有多余的请求。

如何使用：

1、我们可以借助iconfont-阿里巴巴矢量图库，把设计好的svg文件通过上传图标至项目。
2、点击下面红框里面的地址，查看源码，然后复制到自己项目中的css文件中。
3、全局引用然后直接在class=""中使用。
例如：

<i class="ic_gb icon-ic_gb"></i>

使用第一个X号，这样就可以了方便好用
ps：矢量图字体图标还可以自定义颜色。

工作之余 用博客记录自己 希望有能帮助到各位看官
如有错误或不全面的地方望各位能提点一二和留下宝贵意见