Bootstrap Icons 中的 Command 图标：从 SVG 源码到网页嵌入的完整使用指南

Bootstrap Icons 是 Bootstrap 官方开源的 SVG 图标库，包含 2000+ 个图标文件，每个图标在 docs/content/icons 目录下都对应一份独立的文档页面。Command 图标文档 即其中之一：它属于 "UI and keyboard"（界面与键盘）分类，标签为 key、mac，对应的就是 macOS 键盘上的 ⌘（Command）修饰键符号。读完本文，你将掌握该图标的 SVG 结构、字体码点、以及在 HTML/CSS/JS 项目中嵌入它的全部主流方式。

图标文档与分类定位

Command 图标的文档页面位于 docs/content/icons/command.md，其 front matter 定义了图标在文档站中的元数据：

---
title: Command
categories:
  - UI and keyboard
tags:
  - key
  - mac
---

这份 front matter 与其它 2000+ 图标页面采用完全相同的结构。它主要服务于 Hugo 文档站：title 用于面包屑导航与页面标题，categories 和 tags 用于站内归档与检索。文档站的图标详情页模板 docs/layouts/icons/single.html 会读取这些字段渲染 "Tags" 与 "Category" 信息（见该模板第 22-27 行）。

值得说明的是：虽然该文档正文只有 front matter，但它的"正文"实质上是图标详情页模板根据 icons/command.svg、font/bootstrap-icons.json 等仓库资源自动渲染出来的——每个图标页面的完整预览、示例、字体码点与 HTML 片段都在构建时生成，因此本文将以文档页为核心，结合这些源码资源逐层展开。

理解 Command 图标的 SVG 结构

Command 图标的矢量源文件是 icons/command.svg，完整内容如下：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-command" viewBox="0 0 16 16">
  <path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
</svg>

关键结构要点：

• viewBox 为 0 0 16 16：与库中所有图标一致，使用统一的 16×16 逻辑坐标系，保证图标集内视觉比例协调。
• 单条 path：整个 ⌘ 图形（四角方块加中心十字连接）由一条路径绘制，符合图标库追求轻量的原则。
• fill="currentColor"：这是 Bootstrap Icons 全库的统一约定，使图标颜色继承所在元素的 color 属性，天然支持主题化与暗色模式。

同一份 SVG 在仓库中以三种形态存在：单文件 icons/command.svg、合并后的雪碧图符号（bootstrap-icons.svg 中的 <symbol id="command">）、以及字体字形（见下文码点章节）。

获取 Bootstrap Icons 的几种途径

Command 图标随整个 Bootstrap Icons 包一起分发。按官方文档 docs/content/_index.md 的说明，可以通过 npm 或 Composer 安装：

# npm 安装（前端项目常用）
npm install bootstrap-icons

# Composer 安装（PHP 项目常用）
composer require twbs/bootstrap-icons

安装后包内即包含 icons/（单个 SVG）、bootstrap-icons.svg（雪碧图）、font/（字体与 CSS）等目录，与仓库根目录的结构一致。也可以直接将本仓库作为静态资源引用其中的文件。

六种在页面中嵌入 Command 图标的方式

官方文档 docs/content/_index.md 的 Usage 章节给出了推荐用法：Bootstrap Icons 本质是 SVG，建议通过 width: 1em 配合 font-size 实现按字号缩放。以下以 Command 图标为例逐一演示。

1. 内嵌 SVG（Embedded）

将图标 SVG 直接嵌入 HTML，适合需要精细控制或图标数量较少时。文档模板默认渲染的预览即采用此方式，并额外标注了 aria-label="Command - large preview" 保证可访问性：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-command" viewBox="0 0 16 16">
  <path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
</svg>

如需放大，直接调整 width/height（或改成 width: 1em 用 font-size 控制）。

2. SVG 雪碧图（Sprite）

雪碧图方式用 <use> 引用 bootstrap-icons.svg 中对应 <symbol>，片段标识符即图标文件名 command：

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#command"/>
</svg>

雪碧图的优势是单文件复用、依然支持 currentColor 主题化。注意官方文档提示：Chrome 存在 <use> 跨域引用失效的已知问题，生产环境建议将雪碧图与页面同域部署。

3. 外部图片（External image）

把 icons/command.svg 复制到项目资源目录后，当作普通图片引用：

<img src="/assets/icons/command.svg" alt="Command" width="32" height="32">

此方式无法使用 currentColor，颜色固定为 SVG 内的 fill 值，且需显式提供 alt 文本。

4. 图标字体（Icon font）

引入 font/bootstrap-icons.css（生产环境用压缩版 font/bootstrap-icons.min.css）后，用 <i> 标签加类名即可：

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

用 font-size 控制大小、color 控制颜色：

<i class="bi bi-command" style="font-size: 2rem; color: cornflowerblue;"></i>

字体方式最省事，适合图标散落在文本、按钮中的场景。若你的项目走 Sass，可引入 font/bootstrap-icons.scss，并注意按官方文档调整 $bootstrap-icons-font-dir 变量指向字体文件实际安装位置（node_modules 下最常见），这是 Vite、Parcel 等构建工具解析相对 URL 时特别需要注意的点。

5. CSS 伪元素

字体实现底层是通过 ::before 伪元素写入字形码点，见 font/bootstrap-icons.css 第 491 行：

.bi-command::before { content: "\f2cf"; }

因此你完全可以在不依赖 <i> 标签的情况下，把该码点写到任意元素上：

kbd::before {
  font-family: "bootstrap-icons";
  content: "\f2cf";
}

这在制作"快捷键提示"类 UI 时非常实用——比如自定义 kbd 元素，在键盘按键旁渲染 ⌘ 符号。

Command 图标的字体码点：U+F2CF

文档站详情页会根据 font/bootstrap-icons.json 自动计算并展示每个图标的四种码点表示。该文件中 Command 的记录（第 464 行）为：

"command": 62159

62159 的十六进制是 F2CF（位于 Unicode 私用区，图标字体通用做法，不会与常规字符冲突）。由此可推导出四种写法，文档页模板 docs/layouts/icons/single.html 第 121-139 行的 "Code point" 区块正是这样渲染的：

场景	写法	用途
Unicode	U+F2CF	字符标识参考
CSS	\f2cf	::before 的 content 值
JavaScript	\uf2cf	JS 字符串中的转义
HTML 实体		HTML 中直接书写

JS 场景示例：

// 例如在 Canvas 或图表库中直接绘制 ⌘ 字形
ctx.font = '16px "bootstrap-icons"';
ctx.fillText('\uf2cf', x, y);

图标详情页模板揭示了什么

查看 docs/layouts/icons/single.html 可以理解文档页的完整构成，它同时是官方推荐的"用法模板"：

• 大图预览：以 font-size: 10em 居中展示图标 SVG（第 42 行）；
• Examples 区块：演示图标与标题、行内文本、链接、按钮、按钮组、输入框前缀等 Bootstrap 组件组合的典型场景（第 46-106 行）；
• Download 区块：提供 SVG 直接下载链接（第 109-111 行）；
• Icon font 区块：自动生成 <i class="bi bi-command"></i> 片段（第 113-119 行）；
• Code point 区块：如上表所示（第 121-139 行）；
• Copy HTML 区块：高亮显示可直接粘贴的内嵌 SVG 代码（第 142-147 行）。

也就是说，一个图标页面的"全部内容"均由仓库数据驱动生成，docs/content/icons/command.md 只负责标题与分类元数据。这也是理解本仓库文档体系的关键——每个图标页面都是同构的。

实用场景建议

结合 Command 图标的语义（macOS 修饰键），推荐两个典型落地场景：

1. 快捷键提示：在文档、帮助面板、设置页中配合 <kbd> 渲染键盘组合。可将 ⌘ 符号用字体方式嵌入，与系统快捷键说明保持一致，并注意 macOS 与 Windows（通常用 Ctrl 替代）的平台差异。
2. 工具栏/菜单按钮：将图标放入按钮或菜单项时优先使用雪碧图或内嵌 SVG，以保留 currentColor 跟随主题色的能力；纯展示场景（如说明文字旁的小图标）则用字体方式更轻量。

可访问性提醒：装饰性图标应加 aria-hidden="true"，需要传达语义时（如"按住 Command 键"）应配合 aria-label 或相邻文本说明，避免读屏用户丢失信息。

小结

Command 图标是 Bootstrap Icons 中 "UI and keyboard" 分类的代表性图标。围绕 docs/content/icons/command.md 这份文档页，本文拆解了其 SVG 结构（icons/command.svg）、字体码点（U+F2CF，源自 font/bootstrap-icons.json 与 font/bootstrap-icons.css）、以及内嵌 SVG、雪碧图、外部图片、图标字体、CSS 伪元素六种嵌入方式，并给出了各方式的适用场景与注意事项。无论你构建的是 macOS 风格的应用 UI、快捷键文档，还是通用工具栏，都可以按需选取最合适的方式把 ⌘ 图标接入项目。