css引用 svg图标库,svg 图标文件引入小技巧

今天刚刚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图标转化为字体图标文件，就用到我们接下来的一个小方法：

点击右上方的 IcoMoon App 按钮；

在新载入页面中，点击左上方的 Import Icons 按钮，选择自己需要引入的 .svg 图标；

在预览界面选中需要包含的图标后，点击右下方的 Generate Font 按钮；

接着将鼠标置于我们加载的图标上方，点击 Get Code 查看如何引入这个图标(看看多贴心)；

最后download ，引入字体文件和css文件。就可以调用啦。

这只是实际开发中的一个小技巧，小方法，分享给还不知道的人。谢谢。当然觉得有用的话，不妨点个赞鼓励下(羞射)。