0

我正在开发一个 Web 应用程序，它使用 500 多个 SVG 图标来显示徽标、符号等。一段时间以来，我们一直在使用Icomoon 应用程序生成字体文件，使我们能够使用 CSS 类将图标插入页面。

例如，我们有这个图标，它由三个路径组成；两个用于黑色铃铛，一个用于红色圆圈：

警钟图标

我们从 Icomoon 应用程序中得到的结果为我们提供了一个 CSS 文件，其中包含以下内容，其中为图标生成了三个路径并分配了它们自己的颜色：

.icon-alarmbell3 .path1:before {
  content: "\e910";
  color: rgb(0, 0, 0);
}
.icon-alarmbell3 .path2:before {
  content: "\e911";
  margin-left: -1.1259765625em;
  color: rgb(0, 0, 0);
}
.icon-alarmbell3 .path3:before {
  content: "\e912";
  margin-left: -1.1259765625em;
  color: rgb(237, 28, 36);
}

然后可以将其插入到这样的页面中：

<span class="icon-alarmbell3"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span>

然而，这是一个手动过程，随着 SVG 图标集合的增加，变得很麻烦，每次添加新图标时，我们都需要通过 Icomoon 生成新的字体文件。

我玩过不同的 Webpack 插件，它们通过自动生成字体文件来解决这个问题，比如webfonts-generator和fancyon。但它们似乎都没有保持开箱即用的 SVG 的颜色。由于我们的许多图标都是彩色的，它们的颜色应该自动包含在内。

我知道字体的目的是显示文本等，而颜色可能超出了他们的责任范围。但是，像我提到的那些 webpack 插件是否可以以与本示例类似的方式包含颜色，以及如何？

4

0 回答 0