4

I'm trying to get Icons working with Gatsby but it they don't seem to be showing in the production build.

I am importing the icons like this

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

and calling the function like this

initializeIcons()

which is all in my index.js page file. This works fine when running gatsby develop however when i run gatsby build && gatsby serve the icons show up like this.

broken icon

However, when I look inside Chrome dev tools, i can see the icon fonts being downloaded.

icon download

so i am assuming it is something to do with the static render of gatsby. I started with this template https://github.com/microsoft/gatsby-starter-uifabric

Any help is appreciated.

tjackadams
  • 815
  • 2
  • 9
  • 26
  • did you come right with this. I am not using Gatsby but I have the same problem on a basic project using `create-react-app`. – JonathanPeel Jan 16 '20 at 03:08
  • I did yes, although i'm not 100% convinced by it which is why i haven't updated this question with the answer. Gatsby is a lot different to cra though. I ended up using this version of the method `initializeIcons(undefined, { disableWarnings: true })`. As long as it is outside a component, ideally in the main entry file, then it should work ok. – tjackadams Jan 16 '20 at 08:10
  • I had left out `initializeIcons` completely. – JonathanPeel Jan 17 '20 at 10:58

2 Answers2

0

I had the same issue. After trying a bunch of work-arounds, I ended up using office-ui-fabric-core instead.

Install the library: npm i office-ui-fabric-core

Import the ui-fabric-core css

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

example icon component:

import React from "react";

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

export default MyIcon;

Example usage:

<MyIcon iconName="People" />
Kevin Brock
  • 131
  • 8
0

The answer was to use the initializeIcons(undefined, { disableWarnings: true }) method outside of the App class code, just above it will do fine.

To quote the wiki article on the use of this method

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

tjackadams
  • 815
  • 2
  • 9
  • 26