Elliot Dahl
在 Pivotal，我们为我们的产品套件创建了一个使用 React 的 SVG 图标系统。 本文介绍了我使用 CSS 样式化 SVG 图标系统的方法，使其易于使用且有效。
对齐和图标（任何类型的）可能永远有点棘手。 它取决于两个因素，这些因素在每个网站上都不同：字体和图标。 Elliot 能够通过使用 bottom: -0.125em; 将图标向下拉，以获得 与 Arial 的完美对齐，因为 Arial 紧靠基线，而图标本身是在边缘周围设计了 12.5% 的白色空间。 设计具有边缘空间的 SVG 图标是一种相当常见的做法（尽管对于对齐来说很烦人），因为如果没有空间，您可能会在某些浏览器/分辨率/缩放/等情况下出现尴尬的剪切（抱歉，我没有更多细节）。