React Storybook中Bootstrap图标组件不显示问题求助

架构老林

2026-8-19

解决Bootstrap图标在Storybook中不显示的问题

确认Bootstrap图标依赖已安装
先检查项目中是否安装了bootstrap-icons包，未安装的话执行对应命令：
```
npm install bootstrap-icons
# 或使用yarn
yarn add bootstrap-icons
```
在Storybook全局配置中引入图标样式
找到.storybook/preview.js文件，添加Bootstrap图标的样式导入，确保全局环境能加载到图标样式：
```
import 'bootstrap-icons/font/bootstrap-icons.css';
```

检查组件内图标使用语法
核对组件里的图标代码是否符合规范，避免类名拼写错误：

// 示例：react-bootstrap Icon组件用法
import { Icon } from 'react-bootstrap';
<Icon icon="bi bi-heart" />

// 示例：直接使用i标签
<i className="bi bi-heart"></i>

修复Storybook的webpack字体文件处理配置
若自定义了Storybook的webpack配置，需确保支持字体文件加载。在.storybook/main.js中修改配置：

module.exports = {
  webpackFinal: async (config) => {
    // Webpack 5 写法
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
    });
    // 若使用Webpack 4，替换为file-loader写法
    // config.module.rules.push({
    //   test: /\.(woff|woff2|eot|ttf|otf)$/,
    //   use: ['file-loader'],
    // });
    return config;
  },
};