GrowingIO Design 图标库：从原理到实现

随着前端技术的发展，网页中的图标（Icon）已经不再局限于 <img> 标签，还有很多实现方式，比如：Sprites（俗称雪碧图）、Icon Font（字体图标）、SVG 等等。而一个被工程师所熟知的前端框架 Bootstrap，用这些技术实现了它的图标库。

本文先介绍 Bootstrap Icons 的各种实现方式，然后再 GrowingIO Design Icons 的原理与实现。

Bootstrap Icons

<img>

通过 <img> 标签来展示图标是最原始、最简单的实现方式，实现上图的效果只需在 HTML 中插入如下代码：

<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">

但是，这种方式也有一个缺点：在图片显示前需要等待一个 HTTP 会话的时间，当一个页面有若干个图标时，这个时间就的很长。

Sprites

为了解决上面提到的问题，雪碧图就应运而生。假设下图为页面上需要展示的三个图标：

实现代码如下：

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

雪碧图的原理就是把所有的图标都汇总到一个文件中，再通过 CSS 切图或者 SVG 的 <symbol> 来实现。不管要展示多少个图标，都只会有一个 HTTP 会话。

虽然通过 Sprites，把 HTTP 会话数量降低到一个，但是它的下载时机还是在第一次展示图标的时候，还是需要用户等在这个大文件的下载。

Icon font

CSS 中 @font-face 的出现，为解决上述问题提供了思路。@font-face CSS at-rule 指定一个用于显示文本的自定义字体，字体能从远程服务器或者用户本地安装的字体加载。使用方法如下：

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.