今天刚刚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文件。就可以调用啦。
这只是实际开发中的一个小技巧,小方法,分享给还不知道的人。谢谢。当然觉得有用的话,不妨点个赞鼓励下(羞射)。