企业官网建设流程全解析

• 前端

本文以 Bootstrap Icons 官方开源图标库中dice-6（骰子六点）图标为切入点，完整解析该图标在仓库中的元数据定义、SVG 几何结构、字体码点登记，以及四种主流接入方式，并顺带说明其文档页面是如何由构建脚本自动生成的。读完本文，你不仅能直接在自己的页面/项目里正确使用bi-dice-6，还能理解 Bootstrap Icons 单个图标条目从 SVG 到字体再到文档页面的完整数据链路。

图标条目元数据：文档说了什么

Bootstrap Icons 为每一个图标在 docs/content/icons/ 目录下维护一份 Hugo Markdown 元数据文件，dice-6对应的就是 dice-6.md：

--- title: Dice 6 categories: - Entertainment tags: - dice - die - games - gaming - gambling ---

这份 front matter 是图标文档页的核心元数据：

• title：Dice 6，即页面标题，同时被站点模板用作图标的展示名称；
• categories：Entertainment（娱乐），标明图标的主题大类；
• tags：dice、die、games、gaming、gambling，用于站内搜索、标签聚合和内容导航。

这些元数据在渲染时由 docs/layouts/icons/single.html 读取并展示：模板会将tags输出为 "Tags:" 列表、将categories输出为 "Category:" 条目。也就是说，搜索引擎与用户在图标详情页看到的标签信息，全部来源于这份 front matter。

值得一提的是，同一个图标家族还包括dice-1到dice-5以及各自的-fill实心变体，dice-1.md 与dice-6使用完全相同的分类和标签结构，说明骰子系列图标在元数据层面是统一的。

两份 SVG：outline 与 fill 变体

dice-6在仓库中实际对应两个 SVG 文件：

• icons/dice-6.svg：空心（outline）版本，骰子面为透明背景 + 圆角线框 + 实心圆点；
• icons/dice-6-fill.svg：实心（fill）版本，骰子面整体填充、圆点呈镂空效果。

两个文件都遵循 Bootstrap Icons 的统一规范：16×16viewBox、fill="currentColor"（颜色随 CSS 的color属性变化）、class="bi bi-dice-6"（或bi-dice-6-fill）。

outline 版本的路径结构

dice-6.svg 由两个<path>组成：

第一个 path 绘制骰子的外框：先用圆角半径 2 的圆角矩形描述外轮廓（M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z），再叠加一个不带圆角的全尺寸矩形子路径（M3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3z），通过两条路径的组合在视觉上形成"圆角描边"效果。

第二个 path 定义了 6 个点，每个点是一个直径 3（半径 1.5）的圆，用弧线命令（a1.5 1.5 0 1 1-3 0 ...）绘制。6 个圆心分别位于：

这是标准的骰子六点布局：左右两列、每列三点，中排两点与上、下排两点纵向错开 4px。

fill 版本的路径结构

dice-6-fill.svg 则是另一个实现思路：第一个 path 直接绘制一个圆角半径 3 的实心 16×16 圆角矩形主体；后续 6 个子路径同样绘制半径 1.5 的圆点，但绕向与主体相反（顺时针主体 + 逆时针圆点）。在 SVG 默认的nonzero填充规则下，反向绕向的子路径会在实心主体中"挖"出 6 个洞，从而呈现点阵镂空的效果。

从源码结构看，这正是 Bootstrap Icons 中-fill系列的标准做法：用路径绕向控制镂空，而不是依赖fill-rule="evenodd"或遮罩，保证图标在任意currentColor下都能正确渲染。

字体码点：dice-6 在图标字体中的位置

除了 SVG 文件，每个图标还会被登记进图标字体（icon font）。dice-6与dice-6-fill在字体构建产物中的登记位置如下：

• font/bootstrap-icons.css：.bi-dice-6-fill::before { content: "\f2fc"; }、.bi-dice-6::before { content: "\f2fd"; }；
• font/bootstrap-icons.min.css：压缩版中对应规则相同；
• font/bootstrap-icons.scss："dice-6-fill": "\f2fc", "dice-6": "\f2fd"（SCSS 变量映射）；
• font/bootstrap-icons.json："dice-6-fill": 62204, "dice-6": 62205（十进制的 Unicode 码点）；
• font/bootstrap-icons.ts：TypeScript 类型定义中"dice-6-fill" | "dice-6"作为联合类型成员。

由此可以算出dice-6的完整码点信息（62205 的十六进制为F2FD）：

这些表示形式正是图标详情页模板 docs/layouts/icons/single.html 从bootstrap-icons.json读取码点后，动态换算并展示给用户的"Icon font / Code point"区块内容。

四种实战接入方式

按照 README.md 的说明，Bootstrap Icons 支持多种接入方式，dice-6同样适用。

1. 安装获取

通过 npm 安装（README 说明 npm 包内只包含处理过的 SVG，具体接入方式由使用者自行选择）：

npm i bootstrap-icons

也可以通过 Composer 安装（对应 Packagist 上的twbs/bootstrap-icons）：

composer require twbs/bootstrap-icons

2. 内嵌 SVG（推荐用于需要精确控制场景）

直接复制 icons/dice-6.svg 的源码到 HTML 中：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-6" viewBox="0 0 16 16"> <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3z"/> <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-8 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/> </svg>

由于填充色使用currentColor，只需改变祖先元素的color即可完成图标换色，无需改动 SVG 内部。

3. 引用图片文件

将dice-6.svg作为独立静态资源，通过<img>引入：

<img src="icons/dice-6.svg" alt="Dice 6" width="16" height="16">

4. 使用 SVG Sprite

仓库根目录的 bootstrap-icons.svg 是符号模式的 sprite 文件（由 svg-sprite.json 配置生成，symbol 模式输出到仓库根目录）。引入 sprite 后可用<use>引用：

<svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true"> <use xlink:href="bootstrap-icons.svg#dice-6"></use> </svg>

5. 使用图标字体（CSS）

引入 font/bootstrap-icons.css（或压缩版 font/bootstrap-icons.min.css）后，用类名即可渲染：

<i class="bi bi-dice-6"></i> <i class="bi bi-dice-6-fill"></i>

字体文件本身位于 font/fonts/（bootstrap-icons.woff2与bootstrap-icons.woff），由 CSS 开头的@font-face规则加载（font/bootstrap-icons.css）。需要精确控制字体渲染时，还可以直接使用前面表格中的 CSS 转义\f2fd写在自定义样式中。

图标条目文档的生成机制

dice-6.md这类页面并非完全手写，而是由构建脚本生成骨架。看 build/build-pages.mjs 的实现：脚本遍历icons/目录下的每个 SVG 文件，取文件名（如dice-6），将连字符替换为空格并首字母大写（capitalizeFirstLetter），得到Dice 6这样的标题，然后写入docs/content/icons/<name>.md的 front matter 模板（title、空的categories、空的tags）。

生成骨架后，Dice 6的分类（Entertainment）与五个标签由维护者补齐——这正是 dice-6.md 与模板的差异所在。对应的npm run pages命令（package.json）会为全部图标批量生成这些页面。

图标详情页的最终渲染则依赖 docs/layouts/icons/single.html：模板通过printf "/icons/%s.svg" .File.TranslationBaseName拼出对应 SVG 路径并直接内嵌进页面，同时在上方展示标题、Tags、Category，右侧展示下载按钮、图标字体代码片段、码点信息与可复制的 HTML 源码。由此，一份十几行的 front matter 最终被渲染成包含大图预览、字体码点、使用代码的完整图标文档页。

设计规范与自建图标提示

从dice-6的源码可以提炼出 Bootstrap Icons 单个图标的设计约束（README 的 "Adding SVGs" 一节也有说明）：

• 所有图标基于16×16 网格设计，SVG 的viewBox恒为0 0 16 16；
• 导出为纯填充、无描边的扁平化 SVG（dice-6中"描边"效果实际由路径组合模拟）；
• 统一使用fill="currentColor"以便随文本颜色联动；
• 命名遵循dice-6/dice-6-fill的-fill后缀约定，轮廓与实心版本成对提供；
• SVG 入库后会经 SVGO 优化并统一重排属性顺序（见 README.md 与 svg-sprite.json 中的 svgo 配置），再通过npm run icons重新生成字体与 sprite。

如果你想在自建图标库中复刻这套体系，最简路径是：准备好 16×16、currentColor填充的 SVG → 参照 build/build-pages.mjs 批量生成文档骨架 → 再交由 fantasticon/svg-sprite 等工具产出字体与 sprite，即可获得与 Bootstrap Icons 一致的"图标 + 文档 + 字体"完整工作流。

• 前端