css - 覆盖默认应用程序图标(SVG 或 Fonticon？)

Question

我有一个应用程序目前正在为我的应用程序中的所有图标(按钮等)使用 iconmoon，但我希望能够在为客户端参数化应用程序时使图标易于更改。

在这些情况下采取的“最佳”路线是什么？

我考虑过让客户提供一个覆盖 sass 文件，该文件将导入他们自己的图标集(iconmoon 等)并覆盖任何现有类，但感觉不“正确”。

或者，我也可以将 iconmoon 库导出为 svg 文件，并使用 svg 定义类作为背景图像。这将使客户能够仅提供新的 svg 文件，这些文件将在构建过程中覆盖默认的 svg 文件。

有问题的应用程序是 Angular 6 应用程序，因此 Angular CLI 用于构建过程，文件替换由触发 Angular CLI 构建的 java 构建过程完成。

编辑:这更像是 SVG 与 fonticons 的争论。

Answer 1

至于“最简单”(与“最佳”相反):您是否考虑过使用 font-family 的简单回退字符解析机制？ ？

@font-face { font-family: 'Icon Overrides'; (...)}
@font-face { font-family: 'Icon Defaults'; (...)}

.icon { font-family: "Icon Overrides", "Icon Defaults"; }

如果两个字体文件具有统一的图标 ↔ 代码点映射，您将有可能重新定义第一个字体中的部分(或全部)图标；未定义的字符将在第二个中查找。 (您甚至可以为整个应用程序使用单一字体系列，例如 html { font-family: "Icon Overrides", "Icon Defaults", "Base text font", "Some fallback text font", "And so on", sans-serif; }，前提是图标字体使用到相应 Unicode 点的合理映射或使用专用区域。

---

至于“字体是否比内联 SVG 更适合图标”(即您要求的“最佳路线”)，我会坚持当前趋势:尽可能使用 SVG，但讨论它的好处和给定的可维护性环境对于这样一个简单的答案来说太宽泛了。此外，询问诸如“您认为什么对 X 最好”之类的问题对于这个站点来说可能过于模糊。