时间戳

首页 > 解决方案 > 盖茨比不显示 Office UI Fabric React 图标

reactjs - 盖茨比不显示 Office UI Fabric React 图标

问题描述

我正在尝试让图标与 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

任何帮助表示赞赏。

标签： reactjsgatsbyoffice-ui-fabric

解决方案

我遇到过同样的问题。在尝试了一堆变通方法后，我最终改用了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" />

推荐阅读