Can't register <font-awesome-icon> in Storybook

Describe the bug In my project I use the <font-awesome-icon> element to load icons on the vue front end. Unfortunately, this doesn’t work in the storybook stories. Instead I get the following error:

[Vue warn]: Unknown custom element: <font-awesome-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <GridItemPlaceholder> at src/components/GridItemPlaceholder.vue
       <Anonymous>
         <Root>

Does anyone here know how to set this integration up?

Note: I recognise that this is likely a Storybook issue, but would really appreciate it if you could leave this up for a little while to see if anyone knows.

Reproducible test case https://github.com/RCVarley/Storybook-fontawesome-vue-Issue

Expected behavior The fontawesome icons are supposed to load in storybook.

Desktop (please complete the following information):

• Browser: Firefox
• Version: 80.0.1 (64)

Additional context Added the component and populated the library globally in main.js.

import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
import { faPlusSquare as farPlusSquare } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import App from './App.vue';

library.add(fasPlusSquare, farPlusSquare);

Vue.component('font-awesome-icon', FontAwesomeIcon);
...

Then I added I used the <font-awesome-icon> component in GridItemPlaceholder.vue.

<font-awesome-icon
  v-if="hover === true"
  :icon="['fas', 'plus-square']">
</font-awesome-icon>
<font-awesome-icon
  v-else
  :icon="['far', 'plus-square']">
</font-awesome-icon>

Note: I’ve also asked for assistance on https://github.com/storybookjs/storybook/issues/12432, in case anyone there has figured this one out.

[mercedesb]

I got this working by imporing fontawesome into my .storybook/preview.js

This is what my .storybook/preview.js file looks like. You’ll need to update the imports to be the icons you’re actually using, it should match what you have in src/main.js (I actually created a helper file for configuring the fontawesome library so that I don’t have the code duplicated but removed that from this sample).

import Vue from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faAngleLeft, faAngleRight } from '@fortawesome/pro-light-svg-icons';

import '../src/assets/styles/main.scss';

library.add(faAngleLeft, faAngleRight);

Vue.component('font-awesome-icon', FontAwesomeIcon);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  layout: 'centered'
}

[RCVarley]

Thank you all for your help!