覆盖默认应用程序图标（SVG 或 Fonticon？）

Posted 2023-03-06

【中文标题】覆盖默认应用程序图标（SVG 或 Fonticon？）

【英文标题】：Overwriting default app icons (SVG or Fonticon?)

【发布时间】：2018-11-13 11:27:18

【问题描述】：

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

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

我曾考虑让客户提供一个覆盖 sass 文件，该文件将导入他们自己的一组图标（iconmoon 等）并覆盖任何现有的类，但这并不“正确”。

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

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

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

【参考方案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”之类的问题对于本网站来说可能过于模糊。

【讨论】：

问题主要是什么使维护具有大量图标的大型应用程序变得更容易，这些图标需要根据客户需求进行更换，并且需要在自动化（大型）构建期间易于适应过程。

【参考方案2】：

首先你不应该忘记他们可能想要将它恢复为默认值，如果你覆盖它们就不会轻易实现。

我会选择以下地图：它的用途：图标名称：图标路径（原始）：当前图标路径

然后您可以进行一些简单的设计，从该地图中获取所有图标并允许它们更改当前图标路径。如果他们点击“恢复默认”，您只需将当前图标路径更改为原始路径即可。

这里的一点是你在渲染的时候坚持使用地图，这样应用程序就会更加模块。

【讨论】：

感谢您的回答，但构建过程会为每个客户端生成不同的包。客户端无法在构建过程之后更改任何图标，因为他们得到的只是一个战争文件。我自己做图标更改。但是，您的解决方案依赖于什么处理文件的方法？