今天刚刚get到的一个小技能，忍不住想和大家分享一下，万一有同学不太懂，刚好也可以学习一下（ps：知道的同学可以帮我斧正，感谢！）。惯例，先来简单介绍一下 svg，虽然相信大家都懂😓:
svg（可缩放矢量图形）是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
简单的说就是它是一种矢量图形，体积小，高保真，放大放小都不失真。
直接引入svg文件的方式，有以下几种：
- img 标签引入;
- css 属性 background-image: url(‘svg’); 引入;
- 使用 object 标签引入 ;
- iframe 标签引入;
- embed 标签引入;
- svg 标签引入;
但是上面的几种方法，除去方法2，都有个共同特点，都是通过一个标签来引入一个svg文件。但是在实际的开发过程中，需要加载的图标文件数目可能会有很多（尤其在移动端），因此采用标签加载的方式，会导致代码冗余，不美观，且不易维护和阅读。因此，在加载图标文件的时候，我们应该效仿 font-awesome 的加载方式。通过 图标字体文件 & css 这种方式来实现。这样做最显著的优势就是，图标加载方式得到了简化和放宽。
以font-awesome为例，在引入图标字体文件和相关css文件的基础上，加载图标只需为标签添加class属性。
|
|
这样就使得svg加载非常灵活和简洁。但是如何将自己设计的svg图标转化为字体图标文件，就用到我们接下来的一个小方法：
- 首先登陆一个网站（免费哒）： Icon Font & SVG Icon Sets ❍ IcoMoon
- 点击右上方的 IcoMoon App 按钮；
- 在新载入页面中，点击左上方的 Import Icons 按钮，选择自己需要引入的 .svg 图标；
- 在预览界面选中需要包含的图标后，点击右下方的 Generate Font 按钮；
- 接着将鼠标置于我们加载的图标上方，点击 Get Code 查看如何引入这个图标（看看多贴心）；
- 最后download ，引入字体文件和css文件。就可以调用啦。
这只是实际开发中的一个小技巧，小方法，分享给还不知道的人。谢谢。当然觉得有用的话，不妨点个赞鼓励下（羞射）。