Storybook: Use FontAwesome 5 in storybook

[5tormTrooper]

support request summary

I'm using React 16.4 (create-react-app) with Storybook. I'm able to use icons in my app using the method recommended in the official FontAwesome 5 documentation, but when creating a story for a component, the icon doesn't show, and I get a console error like this:

index.es.js:269 Could not find icon {prefix: "fas", iconName: "stroopwafel"}

Is there a way to include fontawesome here?

• "fortawesome/fontawesome-svg-core": "^1.2.0-14",
• "fortawesome/free-solid-svg-icons": "^5.1.0-11",
• "fortawesome/react-fontawesome": "^0.1.0-11",
• "storybook/cli": "^3.4.8",
• "storybook/addon-actions": "^3.4.8",
• "storybook/addon-links": "^3.4.8",
• "storybook/addons": "^3.4.8",
• "storybook/react": "^3.4.8",

[Keraito]

Hey @5tormTrooper would it be possible to provide (an example of) the component that you're using and how your story looks like? If you could provide a minimal reproduction repo that would be even better!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[melismae]

@Keraito @5tormTrooper Hi there! I'm actually running into this issue, but I think I found a work around. The way that Font Awesome is currently recommending that you use icons in React is by importing the following in your App.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCheckCircle, faTimesCircle, faExclamationTriangle, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
...
library.add(faCheckCircle, faTimesCircle, faExclamationTriangle, faInfoCircle);

In my Icons.js file, I then do the following:

import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { colors } from '../../styles/theme';

const Icon = styled(FontAwesomeIcon)``;

const IconSuccess = Icon.extend.attrs({ icon: 'check-circle' })`
    color: ${colors.green};
`;

I use the IconSuccess, for instance in an input field module on clearing a warning, but when I import that module into Storybook, I receive the error that @5tormTrooper mentions above, and the icon does not appear.

The work around is to register the library and import the icons in your Storybook config as you do in your App.js (or whatever), but I wonder if there's another way to do this that I'm missing? Alternately, I wonder if this is actually a font-awesome issue?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[bgaynor78]

I know this is a closed issue and doesn't have a resolution, per se, but I just wanted to confirm what @melismae provided above with a bit more detail that works for my case. As mentioned, you need to add the Fontawesome imports of the library helper and the actual icons you want to use into something like your preview.js config in .storybook like:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faAsterisk, faChevronDown } from '@fortawesome/pro-light-svg-icons';

library.add(faAsterisk, faChevronDown);

Then you should be able to use the icons with the usual references detailed in Fontawesome's docs. Hope this detail helps anyone coming from the Google. 😄