css - 离线时使用 Ant Design 图标

Question

我正在开发一个使用 ant design 的 UI 的 reactJS 应用程序。最近，我们将此应用程序发布到生产环境中，其中的计算机非常锁定。此应用程序是一个 Intranet 应用程序，这些计算机无法访问 Internet。因此，正因为如此，模态框上的 Ant 设计图标显示为空框。我做了一些挖掘，发现图标使用的是 CSS 类。

例如，这是错误模态上红色错误“X”的 CSS 类:

.anticon-cross-circle:before
{
   content:"\E62E"
}

我对 CSS content 属性不太熟悉所以我去了 www.w3schools.com仔细阅读并在他们的 Try It 上测试了这个特定的内容值这个属性的页面，我得到了我在生产环境中得到的空框。

有谁知道需要做什么才能将这些图标导入到我的元素中，以便它们可以离线使用？

谢谢

Answer 1

我认为正在发生的事情是 Ant Design 正在使用指向相应字体文件的 URL 来定义 CSS 字体定义。由于计算机处于离线状态，因此无法找到这些定义。

在文档中，我看到他们还提供了 SVG 图标，应该可以完全离线使用。我认为这值得一试。实现这个的步骤可以在这里找到，它应该从 3.9.0 版开始可用:https://ant.design/components/icon/#SVG-icons