字体真棒图标未显示在故事书图标 vue 中答案

【问题标题】：Font awesome icon not showing in storybook iconography vue字体真棒图标未显示在故事书图标 vue 中
【发布时间】：2023-01-15 19:09:00
【问题描述】：

我正在尝试为我的 vue 项目中的所有图标制作一个带有故事书的图标。我只想使用 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')

故事书文件 (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>

该图标不只是显示一个框：

【问题讨论】：

只是反馈，当您在main.ts 中全局导入 awesome 字体时，您不需要在任何其他文件中重新导入它。另外，您是否尝试过它的数组语法？
能给我看看么？我以为我必须在 Storybook 中再次导入它

标签： vue.js storybook

【解决方案1】：

您需要在您的故事书preview.js 文件中设置 fontawesome。您可以在那里添加以下内容：

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

library.add(fas);

那么，您的故事将如下所示：

import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

<Meta title="Iconography" />

# Iconography

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

【讨论】：