Vue项目中Storybook图标库无法显示Font Awesome图标问题求助

大家好，我正在Vue项目里尝试用Storybook搭建一个图标库，打算只用Font Awesome的图标，但现在遇到了问题——图标显示不出来，只会呈现一个方框，想请教下各位怎么解决这个问题。

下面是我的相关代码：

项目主入口文件 main.ts #

import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')

Storybook文档文件 iconography.stories.mdx #

import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

<Meta title="Design Tokens/Iconography" />

# Iconography

<IconGallery>
<IconItem name="user-secret">
<font-awesome-icon icon="fa-solid fa-user-secret" />
</IconItem>
</IconGallery>

排查方向与解决方案 #

我发现主项目里这个图标能正常显示，但到Storybook里就失效了，猜测大概率是Storybook没有正确加载Font Awesome的配置，给大家分享几个可行的解决步骤：

• 配置Storybook预览入口
  Storybook有独立的预览配置文件（通常是.storybook/preview.ts或.storybook/preview.js），需要在这里复刻主项目里的Font Awesome初始化逻辑，因为Storybook不会自动继承main.ts的配置：

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
import { app } from '@storybook/vue3';

library.add(faUserSecret);
app.component('font-awesome-icon', FontAwesomeIcon);

• 优化MDX中的图标引用方式
  在MDX里使用图标组件时，直接传入图标对象比字符串名称更可靠，修改后的代码如下：

<IconItem name="user-secret">
  <FontAwesomeIcon :icon="faUserSecret" />
</IconItem>

注意要确保已经在MDX文件顶部导入了faUserSecret这个图标对象。

• 确认依赖完整性
  检查是否安装了所有必需的Font Awesome依赖，没装的话执行安装命令：

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

如果以上步骤都试过还是不行，可以尝试清除Storybook缓存后重启服务：

npx storybook dev --no-manager-cache

备注：内容来源于stack exchange，提问作者Maiken Madsen