离线时使用 Ant Design 图标答案

【问题标题】：Use of Ant Design Icons While Offline离线时使用 Ant Design 图标
【发布时间】：2020-04-11 03:33:11
【问题描述】：

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

例如，这是错误模式中红色错误“X”的 CSS 类：

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

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

有谁知道需要做什么才能将这些图标导入我的项目以便离线使用？

谢谢

【问题讨论】：

标签： css reactjs antd offline-mode

【解决方案1】：

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

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

【讨论】：

从他们的文档中引用：We introduced SVG icons in version 3.9.0, replacing font icons. 字体图标基本上需要从 CDN 加载，除非您的本地项目文件夹或资产中有字体文件。因此，将您的 ant-design 升级到 3.9.0 可能就是答案。

【解决方案2】：

您是否尝试将图标库下载到您的项目文件夹中？ https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react。看起来他们已经为自己的图标分配了自己的代码，所以你需要让它们离线。

【讨论】：