把 SVG 图标对齐到文本，以告别字体图标（Font Icons）的时代

本文讲的是把 SVG 图标对齐到文本，以告别字体图标（Font Icons）的时代，

把 SVG 图标对齐到文本，以告别字体图标（Font Icons）的时代

在字体图标盛行的时代，推行 SVG 图标可谓是 Web 社区中的一次重要契机。毕竟，使用 SVG 图标系统能更好地遵循图形的访问性标准，并渲染出更高质量的图像。此外，开发者还能轻而易举地通过该类系统增加/删除/修改库中的图标。因此，鉴于这样的优势，我们使用 React 开发了一套自家的 SVG 图标系统产品，并发布在 Pivotal 上。本文将阐述作者如何使用 CSS 来对 SVG 图标系统进行样式的定制以高效便捷地使用该类系统。

为何在乎 SVG 图标样式的定制方式？

若您过去曾使用过像 Font Awesome 这样的字体图标系统，你就会发现在一个项目中引用并使用该类系统将会是一件极其简单的事情。况且，我们还能轻松地把该类字体图标对齐到文本，并通过 font-size 属性修改元素的大小。而相比之下，我们目前却还没有一套清晰的方法去为 SVG 图标定制样式。当然，市面上的一些系统也只是把定制的样式应用到库中的单个图标，而非全部。因此，在 UI 中倘若想同时利用超过15个 SVG 图标，那将会是一件何等痛苦且无法持续下去的事情。