Vue3 Storybook中按钮组件图标不显示问题求助

1. 修正Storybook的Vite配置 #

因为用的是Vite构建，Storybook的Vite配置可能没正确识别图标库，在.storybook/main.js里添加Vite优化配置：

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/vue3",
  core: {
    builder: "@storybook/builder-vite",
  },
  async viteFinal(config) {
    // 强制Vite预解析图标库，避免按需引入问题
    config.optimizeDeps = {
      ...config.optimizeDeps,
      include: ["@dvuckovic/vue3-bootstrap-icons"],
    };
    return config;
  },
};

2. 在Storybook中全局注册图标库 #

别在单个组件/story里零散导入，直接在.storybook/preview.js里全局注册整个插件：

import { app } from '@storybook/vue3';
import BootstrapIcons from '@dvuckovic/vue3-bootstrap-icons';

// 全局注册所有图标组件
app.use(BootstrapIcons);

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

这个库是通过Vue插件方式全局注册所有图标的，必须用app.use()才能生效，单独导入单个图标组件没用。

3. 检查Button组件的图标使用语法 #

确保Button.vue里用的是正确的组件名BootstrapIcon，并正确传icon属性：

<template>
  <button class="btn">
    <BootstrapIcon v-if="icon" :icon="icon" />
    <span>{{ label }}</span>
  </button>
</template>

<script setup>
defineProps({
  label: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    default: ''
  }
});
</script>

4. 清理依赖缓存重新安装 #

有时候依赖安装会有缓存问题，执行以下命令重置：

rm -rf node_modules package-lock.json
npm install
npm run storybook

5. 确认是否需要导入图标样式 #

如果图标还是不显示，检查库是否需要额外引入CSS，在.storybook/preview.js里添加：

import '@dvuckovic/vue3-bootstrap-icons/dist/bootstrap-icons.css';

内容的提问来源于stack exchange，提问作者R-b-n