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

Question

我正在尝试让图标与 Gatsby 一起工作，但它们似乎没有出现在生产版本中。

我正在导入这样的图标

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

并像这样调用函数

initializeIcons()

这都在我的 index.js 页面文件中。这在运行ning 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 class 代码之外使用 initializeIcons(undefined, { disableWarnings: true }) 方法，就在上面就可以了。

此方法的使用引用wiki文章

If your code is running in an environment where icons may have already been registered, you may need to disable the warnings. (By default, registering the same icon twice will ignore subsequent registrations.) To initialize icons and avoid duplication warnings, pass options into initializeIcons:

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

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

Office UI Fabric React Icons not showing with Gatsby

reactjs

gatsby

office-ui-fabric