Bootstrap Icons badge-tm 商标徽章图标详解：SVG 路径、字体码点与四种引入方式

• 前端

本文围绕 Bootstrap Icons 图标库中的badge-tm徽章图标展开，基于其文档页元数据 badge-tm.md 以及仓库内对应的 SVG 源文件、字体码点映射和 Hugo 文档站模板，完整讲解该图标的图形结构、填充变体、字体集成方式，并给出可直接复制使用的四种引入代码。读完本文，你将掌握如何在任意项目中以图标字体、内联 SVG、SVG Sprite 或独立文件方式使用badge-tm，并理解该图标文档页面在仓库中是如何被生成与驱动的。

图标定位：Badges 徽章家族的一员

badge-tm的文档元数据非常简洁，仅包含三段信息：

--- title: Badge tm categories: - Badges tags: - trademark ---

• title：Badge tm，即“商标（trademark，TM）徽章”；
• categories：Badges，表明它属于“徽章”类图标；
• tags：trademark，说明其语义用途是标注商标信息。

从同属徽章家族的图标命名（如badge-4k、badge-8k、badge-hd、badge-sd、badge-vo、badge-vr、badge-wc、badge-cc、badge-ad、badge-3d等，均可在 icons/ 目录中看到对应的.svg文件）可以推断：这组徽章图标被设计用于模拟电视、播放器、内容卡片上常见的格式/规格/商标角标。badge-tm即是在此类场景中用来表示“TM 商标”标识的角标。

该图标在仓库中共有两个变体，分别对应两个 SVG 源文件：

• icons/badge-tm.svg：描边（线框）风格，默认变体；
• icons/badge-tm-fill.svg：填充（实心）风格。

解读 SVG 源码：16×16 网格上的圆角徽章

Bootstrap Icons 的全部图标 都基于16×16 的 viewBox 网格绘制，badge-tm.svg也不例外。其完整源码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-badge-tm" viewBox="0 0 16 16"> <path d="M5.295 11V5.995H7V5H2.403v.994h1.701V11zm3.397 0V7.01h.058l1.428 3.239h.773l1.42-3.24h.057V11H13.5V5.001h-1.2l-1.71 3.894h-.039l-1.71-3.894H7.634V11h1.06z"/> <path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/> </svg>

文件中有两个关键属性值得注意：

• fill="currentColor"：图标不写死颜色，而是继承所在元素（或 CSS）的color，这正是 Bootstrap Icons 可以轻松随文字、按钮、链接颜色变色的根本原因；
• viewBox="0 0 16 16"：所有路径坐标都落在 0～16 的网格内，保证任意缩放不失真。

两个<path>各司其职：

1. 文字字形路径（第一段d）：从坐标上看，它由两段子路径构成，分别勾勒“TM”两个字母的字形轮廓。第一段以M5.295 11起笔，纵向延伸到5.995、再横向拉出顶部的横杠，构成左侧字母（T）；第二段以m3.397 0起笔，通过l1.428 3.239、l1.71-3.894等相对线段组合出右侧字母（M）的笔画与衬线结构。整个文字区域横向跨度约为 x=2.4 至 x=13.5，几乎铺满徽章内部。

2. 圆角矩形边框路径（第二段d）：由两段圆角矩形子路径叠加而成。第一段用半径为 1 的圆弧（a1 1 0 0 1）画出主要边框，第二段用半径为 2 的圆弧（a2 2 0 0 0）补足外缘轮廓，两段子路径配合实现平滑、饱满的圆角方框外观，这是图标绘制中常用的“双子路径描边”手法，可让轮廓在渲染时更加干净锐利。

也就是说，badge-tm的视觉结构是：一个圆角方框 + 内部的 TM 文字，对应“商标角标”的直觉语义。

填充变体 badge-tm-fill：实心色块版

icons/badge-tm-fill.svg 是同一语义的实心版本。与描边版不同的是，填充版把“圆角矩形 + TM 文字”合并进了同一个路径：第一段子路径是实心的圆角矩形色块，后续两段子路径则是 TM 文字的字形（其坐标在填充版中做了微调，例如文字起点为M3.295与M7.633，与描边版的M5.295、M7.634略有差异），用于在实心底色上叠印出文字。

填充版适合需要高对比度、强视觉重量的场景，例如深色卡片上的角标、按钮徽章、状态标签等；而描边版更适合细线风格、需要与正文文字保持一致的轻量 UI。二者在文档站中并列展示，可按需选用。

字体集成：码点、SCSS 与字体文件

badge-tm除了作为独立 SVG 存在，还被编译进了Bootstrap Icons 图标字体（icon font）。仓库中的 font/bootstrap-icons.json 记录了每个图标的 Unicode 码点，第 106～107 行：

"badge-tm-fill": 61800, "badge-tm": 61801,

这里的数值是十进制码点，换算成十六进制为：

同时，font/bootstrap-icons.scss 的第 140～141 行以 Sass 变量形式记录了一致的映射：

"badge-tm-fill": "\f168", "badge-tm": "\f169",

可以推断：经过 Sass 编译后，font/bootstrap-icons.css（以及压缩版bootstrap-icons.min.css）会为.bi-badge-tm生成::before { content: "\f169" }这样的字体声明；配合 font/fonts/ 下的bootstrap-icons.woff2、bootstrap-icons.woff字体文件，即可用图标字体方式渲染该图标。这也解释了为什么文档站中直接使用<i class="bi bi-badge-tm"></i>就能显示图标。

四种使用方式与完整代码

Bootstrap Icons 为每个图标提供了四类消费途径，badge-tm也不例外。以下用法均可在文档站图标页模板 docs/layouts/icons/single.html 中找到对应实现（其Download、Icon font、Code point、Copy HTML四个区块正是为此设计的）。

1. 图标字体（Font）

引入字体 CSS 后直接写类名即可：

<i class="bi bi-badge-tm"></i>

适用于按钮、菜单、表单占位等以文本为中心的场景，颜色通过color控制，尺寸通过font-size控制，会随字体平滑缩放。

2. 内联 SVG（Inline SVG）

直接复制 icons/badge-tm.svg 的内容到 HTML 中（文档站的 “Copy HTML” 区块即提供此功能）。内联方式与 CSS 的fill、currentColor完全打通，便于用 CSS 精细控制：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-badge-tm" viewBox="0 0 16 16"> <path d="M5.295 11V5.995H7V5H2.403v.994h1.701V11zm3.397 0V7.01h.058l1.428 3.239h.773l1.42-3.24h.057V11H13.5V5.001h-1.2l-1.71 3.894h-.039l-1.71-3.894H7.634V11h1.06z"/> <path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/> </svg>

3. SVG 符号精灵（Sprite）

仓库根目录的 bootstrap-icons.svg 是全部图标的精灵（sprite）文件，其中包含id="badge-tm"与id="badge-tm-fill"两个<symbol>定义。图标列表模板 docs/layouts/partials/icons.html 中的引用方式即：

<svg class="bi" width="1em" height="1em" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#badge-tm"/> </svg>

精灵方式适合同页多次使用同一图标、需要复用且希望减少 DOM 体积的场景，配合<use>可以任意变换尺寸和颜色。

4. 下载独立 SVG 文件

直接从 icons/badge-tm.svg（或填充版 icons/badge-tm-fill.svg）下载源文件，用于静态资源、设计稿或无法引入构建工具的项目；文档站图标页的 “Download SVG” 按钮（见 single.html 第 109～111 行）提供的正是这两个文件。

文档页背后：front matter 如何驱动页面渲染

badge-tm.md虽然只有几行 front matter，却是整个文档站图标页体系的“入口”。仓库使用 Hugo 生成文档站，图标页模板 docs/layouts/icons/single.html 会基于该元数据自动渲染出完整页面：

• 标题与元信息展示：模板用{{ .Title }}输出标题，并用with .Params.tags/with .Params.categories将 front matter 中的tags: [trademark]与categories: [Badges]渲染为页面的标签与分类列表（第 22～27 行）；
• 图标预览：模板通过printf "/icons/%s.svg" .File.TranslationBaseName定位到仓库中的实际 SVG 文件并内联输出，因此badge-tm.md对应的预览即来自 icons/badge-tm.svg，并以 10em 字号大图、Heading、内联文本、链接、按钮、输入框等多种排版示例展示（第 42～105 行）；
• 码点展示：模板读取 font/bootstrap-icons.json，以index $codepoints .File.TranslationBaseName取出61801并格式化为U+F169、\f169、\uF169、四种形式（第 121～139 行），与上文的码点表格完全对应；
• 字体片段：模板按printf '<i class="bi bi-%s"></i>' .File.TranslationBaseName自动生成<i class="bi bi-badge-tm"></i>供用户复制。

而在图标总览页，docs/layouts/partials/icons.html 会遍历所有Type = "icons"的页面，把 front matter 中的tags、categories写入data-tags、data-categories属性，支撑搜索框的实时过滤；同时用<use xlink:href="../bootstrap-icons.svg#badge-tm"/>在列表中渲染每个图标。

因此可以说：badge-tm.md的三行元数据，既是该图标在文档站中的唯一内容源，也是驱动 SVG 预览、字体码点、下载链接、搜索分类等整套页面逻辑的配置中心。

小结

• badge-tm是 Bootstrap IconsBadges分类下的商标徽章图标，标签为trademark，源文件为 icons/badge-tm.svg 与填充版 icons/badge-tm-fill.svg；
• 图形结构为 16×16 网格上的圆角方框 + TM 文字，使用currentColor随上下文变色；
• 字体码点为U+F169（CSS\f169），对应映射记录在 font/bootstrap-icons.json 与 font/bootstrap-icons.scss 中；
• 支持图标字体、内联 SVG、SVG 精灵、独立文件四种引入方式，且精灵符号已内置在 bootstrap-icons.svg；
• 其文档页完全由 front matter 元数据驱动 single.html 模板自动生成，理解了badge-tm.md，也就理解了仓库中全部 2000+ 图标文档页的生成机制。

• 前端