羸弱的小金鱼

svg图标文件引入小技巧

今天刚刚get到的一个小技能,忍不住想和大家分享一下,万一有同学不太懂,刚好也可以学习一下(ps:知道的同学可以帮我斧正,感谢!)。惯例,先来简单介绍一下 svg,虽然相信大家都懂😓:

SVG(可缩放矢量图形)_百度百科

svg(可缩放矢量图形)是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。

简单的说就是它是一种矢量图形,体积小,高保真,放大放小都不失真。

直接引入svg文件的方式,有以下几种:


  1. img 标签引入;
  2. css 属性 background-image: url(‘svg’); 引入;
  3. 使用 object 标签引入 ;
  4. iframe 标签引入;
  5. embed 标签引入;
  6. svg 标签引入;

但是上面的几种方法,除去方法2,都有个共同特点,都是通过一个标签来引入一个svg文件。但是在实际的开发过程中,需要加载的图标文件数目可能会有很多(尤其在移动端),因此采用标签加载的方式,会导致代码冗余,不美观,且不易维护和阅读。因此,在加载图标文件的时候,我们应该效仿 font-awesome 的加载方式。通过 图标字体文件 & css 这种方式来实现。这样做最显著的优势就是,图标加载方式得到了简化和放宽。

以font-awesome为例,在引入图标字体文件和相关css文件的基础上,加载图标只需为标签添加class属性。

1
<i class=‘fa fa-star’></i>

这样就使得svg加载非常灵活和简洁。但是如何将自己设计的svg图标转化为字体图标文件,就用到我们接下来的一个小方法:

  1. 首先登陆一个网站(免费哒): Icon Font & SVG Icon Sets ❍ IcoMoon
  2. 点击右上方的 IcoMoon App 按钮;
  3. 在新载入页面中,点击左上方的 Import Icons 按钮,选择自己需要引入的 .svg 图标;
  4. 在预览界面选中需要包含的图标后,点击右下方的 Generate Font 按钮;
  5. 接着将鼠标置于我们加载的图标上方,点击 Get Code 查看如何引入这个图标(看看多贴心);
  6. 最后download ,引入字体文件和css文件。就可以调用啦。

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