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

Question

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

我正在导入这样的图标

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

并像这样调用函数

initializeIcons()

这一切都在我的 index.js 页面文件中。运行 gatsbydevelop 时效果很好，但是当我运行 gatsby build && gatsbyserve 时，图标显示如下。

但是，当我查看 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" />