使用最新Bootstrap Vue的Vue项目中仅部分图标可用的问题

配置正确性确认 #

你的main.js导入配置和依赖安装完全符合官网要求，配置本身没有问题。

核心问题原因 #

Bootstrap Vue 2.x版本的<b-icon>组件依赖自身维护的图标映射表（即你找到的/node_modules/bootstrap-vue/src/icons/icons.js），这个映射表并没有同步bootstrap-icons包的所有最新图标——它只包含Bootstrap Vue官方适配过的图标，并不是覆盖了bootstrap-icons模块，两者是独立的：

• <b-icon>默认调用的是Bootstrap Vue预定义的图标映射
• bootstrap-icons包是完整的图标库，但需要额外处理才能被<b-icon>识别

解决办法 #

方案1：使用Bootstrap Vue官方支持的图标 #

查询Bootstrap Vue 2.x的官方图标列表，选择已适配的替代图标。

方案2：手动注册缺失的图标到Bootstrap Vue #

从bootstrap-icons包中提取目标图标的SVG代码，手动注册到Bootstrap Vue的图标系统：

// 在src/main.js中添加以下代码（放在Bootstrap Vue导入之后）
import { BIcon } from 'bootstrap-vue'

// 从node_modules/bootstrap-icons/svg/send.svg复制的核心SVG路径内容
BIcon.register({
  send: {
    name: 'send',
    content: '<path d="M19.219 5.262c-3.107-2.338-7.413-2.02-10.071.86L3.692 9.798c-2.699 2.914-2.39 7.366.537 9.841L9 21l5.941-3.068c2.474-1.28 4.125-3.746 4.27-6.522.17-3.217-1.654-6.083-4.792-7.148z"/>',
    width: 24,
    height: 24
  }
})

注册完成后即可正常使用<b-icon icon="send" />。

方案3：直接使用Bootstrap Icons原生类名 #

绕过Bootstrap Vue的<b-icon>组件，直接用bootstrap-icons的原生类名方式：

1. 先确保导入bootstrap-icons的CSS（如果没加的话在main.js添加）：

import 'bootstrap-icons/font/bootstrap-icons.css'

2. 使用图标：

<i class="bi bi-send"></i>

补充说明 #

Bootstrap Vue 2.x已停止维护，若后续升级到BootstrapVueNext（Bootstrap Vue 3），会更好地同步Bootstrap Icons的最新图标库，减少此类适配问题。

内容的提问来源于stack exchange，提问作者keyboard-warrior