盖茨比不显示 Office UI Fabric React 图标答案

【问题标题】：Office UI Fabric React Icons not showing with Gatsby盖茨比不显示 Office UI Fabric React 图标
【发布时间】：2020-01-18 15:59:48
【问题描述】：

我正在尝试让图标与 Gatsby 一起使用，但它们似乎没有在生产版本中显示。

我正在导入这样的图标

import {
  initializeIcons
} from "office-ui-fabric-react"

并像这样调用函数

initializeIcons()

这一切都在我的index.js 页面文件中。这在运行gatsby develop 时工作正常，但是当我运行gatsby build && gatsby serve 时，图标显示如下。

但是，当我查看 Chrome 开发工具时，我可以看到正在下载的图标字体。

所以我假设它与 gatsby 的静态渲染有关。我从这个模板开始https://github.com/microsoft/gatsby-starter-uifabric

感谢任何帮助。

【问题讨论】：

你做得对吗？我没有使用 Gatsby，但我在使用 create-react-app 的基本项目中遇到了同样的问题。
我做了，虽然我不是 100% 相信它，这就是为什么我没有用答案更新这个问题。不过，盖茨比与 cra 有很大不同。我最终使用了这个版本的方法initializeIcons(undefined, { disableWarnings: true })。只要它在组件之外，最好是在主入口文件中，那么它应该可以正常工作。
我完全忽略了initializeIcons。

标签： reactjs gatsby office-ui-fabric

【解决方案1】：

我有同样的问题。在尝试了一堆变通方法后，我最终改用了office-ui-fabric-core。

安装库： npm i office-ui-fabric-core

导入 ui-fabric-core css

import "office-ui-fabric-core/dist/css/fabric.css";

示例图标组件：

import React from "react";

const MyIcon = ({iconName}) => <i className={`ms-Icon ms-Icon--${iconName}`} aria-hidden="true"></i>

export default MyIcon;

示例用法：

<MyIcon iconName="People" />

【讨论】：

【解决方案2】：

答案是在 App 类代码之外使用 initializeIcons(undefined, { disableWarnings: true }) 方法，就在上面就可以了。

引用wiki文章关于这个方法的使用

如果您的代码在可能已经注册图标的环境中运行，您可能需要禁用警告。（默认情况下，两次注册同一个图标将忽略后续注册。）要初始化图标并避免重复警告，请将选项传递给 initializeIcons：

https://github.com/microsoft/fluentui/wiki/using-icons

【讨论】：