Office UI Fabric React图标未与Gatsby一起显示

Question

我正试图让Icons与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

开始

感谢您的帮助。

Answer 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" />

Answer 2

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

引用有关使用此方法的维基文章

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

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