Display Font Awesome Icons in a Storybook MDX page

Question

I'm trying to find the correct way to display Font Awesome icons in a static Iconography MDX page in a Storybook application (https://storybook.js.org/docs/writing-docs/mdx). I'm importing the icons correctly: I can display them correctly on an ordinary Vue page and in a Storybook story, but the display isn't working in an MDX page.

I've added free Font Awesome packages to my repo:

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-solid-svg-icons

I import the icons in ./storybook/preview.ts:

import { setup } from '@storybook/vue3'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCheck } from '@fortawesome/free-solid-svg-icons'
import { faUserCircle } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

setup((app) => {
  library.add(faCheck, faUserCircle)
  app.component('font-awesome-icon', FontAwesomeIcon)
})

I try to display them in an MDX file. The application compiles with no errors or warnings, but the icons do not appear, only empty rectangles. Examining the elements in Chrome DevTools shows that the font-awesome-icon elements have not been translated to SVGs:

import { IconGallery, IconItem, Meta } from '@storybook/blocks'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

<Meta title="Iconography/Font Awesome Icons" />

# Icons

These icons from [Font Awesome](https://fontawesome.com) are cool

<IconGallery>
    <IconItem name="Solid Check">
        <font-awesome-icon icon="fa-solid fa-check" />
    </IconItem>
    <IconItem name="User Circle">
        <font-awesome-icon icon="fa-regular fa-user-circle" />
    </IconItem>
</IconGallery>

An expert friend suggested importing the icons again in the MDX file and using a JSX style, but this doesn't compile:

import { IconGallery, IconItem, Meta } from '@storybook/blocks'

<script setup>
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCheck } from '@fortawesome/free-solid-svg-icons'
import { faUserCircle } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCheck, faUserCircle)
</script>

<Meta title="Iconography/Font Awesome Icons" />

# Icons

These icons from [Font Awesome](https://fontawesome.com) are cool

<IconGallery>
    <IconItem name="Solid Check">
        <FontAwesomeIcon :icon="['fa-solid', 'fa-check']" />
    </IconItem>
    <IconItem name="User Circle">
        <FontAwesomeIcon :icon="['fa-regular', 'fa-user-circle']" />
    </IconItem>
</IconGallery>

The error message is Internal server error: Unexpected character =(U+003D) in local name, expected a name character such as letters, digits,$, or _; whitespace before attributes; or the end of the tag.

Here is my Github repo with what I've tried so far: https://github.com/proftodd/storybook-demo

Any help or suggestions would be greatly appreciated!