如何仅引入Bootstrap Icons中的部分图标？

Bootstrap Icons的Sass体系支持自定义筛选图标，核心是重写$bootstrap-icons-map变量，只保留你需要的图标项。具体操作步骤如下：

• 先引入基础依赖文件（不包含全部图标）
  别直接引入完整的bootstrap-icons.scss，先导入工具类、变量和混合宏：

  @import "~bootstrap-icons/scss/functions";
  @import "~bootstrap-icons/scss/variables";
  @import "~bootstrap-icons/scss/mixins";
  

• 自定义需要的图标映射
  你可以从原$bootstrap-icons-map里提取目标图标条目，或者手动声明。比如只保留search和heart图标：

  $bootstrap-icons-map: (
    "search": (
      "class": "bi-search",
      "width": 16,
      "height": 16,
      "paths": "M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
    ),
    "heart": (
      "class": "bi-heart",
      "width": 16,
      "height": 16,
      "paths": "m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"
    )
  );
  

  注：每个图标的paths内容，直接从node_modules/bootstrap-icons/icons/[图标名].svg里复制<path>标签的d属性值即可。

• 生成目标图标样式
  导入生成图标类的Sass文件，它会基于你自定义的$bootstrap-icons-map生成对应样式：

  @import "~bootstrap-icons/scss/icons";
  

• 更简便的筛选方式：用Sass函数提取
  要是不想手动复制paths内容，可以用Sass的map工具函数从原映射里提取需要的图标：

  // 先导入完整变量文件获取原图标映射
  @import "~bootstrap-icons/scss/variables";
  
  // 定义你需要的图标名称列表
  $needed-icons: ("search", "heart", "github");
  
  // 筛选出目标图标并重新赋值给映射变量
  $bootstrap-icons-map: ();
  @each $icon in $needed-icons {
    @if map-has-key($bootstrap-icons-map, $icon) {
      $bootstrap-icons-map: map-merge($bootstrap-icons-map, ($icon: map-get($bootstrap-icons-map, $icon)));
    }
  }
  
  // 导入其余必要文件
  @import "~bootstrap-icons/scss/functions";
  @import "~bootstrap-icons/scss/mixins";
  @import "~bootstrap-icons/scss/icons";
  

编译后只会生成你指定的图标类，不会包含全部图标，能有效减少最终CSS文件体积。

内容的提问来源于stack exchange，提问作者Jonathan