企业官网建设流程全解析

• 前端

Bootstrap Icons 是 Bootstrap 官方维护的开源 SVG 图标库，仓库内收录了超过 2,000 个图标，覆盖箭头、天气、交通、媒体、设备、Emoji 等常见 UI 场景。本文以仓库 README.md 为主线，结合 package.json、svgo.config.mjs、svg-sprite.json 与 build 目录下的构建脚本，完整讲解如何安装引入、四种使用方式、本地开发环境搭建、图标规范化加工流程与发布机制，帮助你既能直接使用这套图标，也能深入理解其背后的构建原理。

项目速览

Bootstrap Icons 以「图标即文件」为核心理念：每个图标都是独立的 16x16 网格 SVG 文件，存放在仓库根目录的 icons 目录中（例如 icons/alarm.svg、icons/alarm-fill.svg）。同一语义往往提供-fill（实心）与普通描边两种变体，部分还提供-circle、-square等容器变体，例如arrow-down-circle-fill、arrow-up-left-square。

仓库的发布物并不包含复杂的框架封装，而是直接面向开发者：

• icons：单个 SVG 源文件
• bootstrap-icons.svg：全部图标合并而成的 SVG Sprite（Symbol 模式）
• font：由图标自动生成的 Web Font 及其配套 CSS/SCSS/TypeScript/JSON 文件
• docs：基于 Hugo 的官方文档站点

当前仓库的版本为 1.13.1（见 package.json 的version字段），许可协议为 MIT（见 LICENSE）。

安装 Bootstrap Icons

Bootstrap Icons 已经打包并发布到 npm。需要注意：npm 包内只包含加工处理后的 SVG 成品，不会附带任何框架层封装，具体如何渲染由你和团队自行实现。

npm i bootstrap-icons

对于使用 Packagist 生态的 PHP/Composer 项目，也可以通过 Composer 安装：

composer require twbs/bootstrap-icons

此外该图标库还同步提供 Figma 社区版本，方便设计师在原型阶段直接使用同一套视觉资源。

安装完成后，包的入口产物与仓库发布物一一对应：

这些文件的具体构成可以在 package.json 的files字段中确认。

四种使用方式

根据项目的技术栈与渲染需求，可以选择以下任意一种方式引入图标。

1. 直接复制粘贴 SVG（内嵌 HTML）

将 icons 目录中某个 SVG 文件的内容直接粘贴到 HTML 中。加工后的图标文件带有标准化的class="bi bi-xxx"、width="16"、height="16"、fill="currentColor"属性，因此可以借助 CSS 控制颜色与尺寸：

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

2. 通过<img>元素引用

把 SVG 视为普通图片资源：

<img src="icons/alarm.svg" alt="Alarm" width="32" height="32">

这种方式的优点是零 CSS 依赖，缺点是颜色由文件内的currentColor决定，外部不易覆写。

3. 使用 SVG Sprite

仓库根目录的 bootstrap-icons.svg 是一个标准的 Symbol 型 Sprite：每个图标被包裹在<symbol id="xxx">中，例如<symbol id="alarm">。引入方式如下：

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

Sprite 方式只需一次 HTTP 请求即可复用任意图标，适合图标数量较多的场景。

4. 通过 CSS 字体引入

引入 font/bootstrap-icons.css（或编译 font/bootstrap-icons.scss），即可使用bi/bi-xxx类名：

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

其实现原理在 CSS 中非常直观——每个图标对应一个::before伪元素：

@font-face { font-family: "bootstrap-icons"; src: url("./fonts/bootstrap-icons.woff2?<hash>") format("woff2"), url("./fonts/bootstrap-icons.woff?<hash>") format("woff"); } .bi-alarm::before { content: "\f102"; }

字体文件位于 font/fonts（提供 woff2 与 woff 两种格式，并在 URL 上附加哈希参数以便缓存刷新）。SCSS 版本则把同样的映射整理为 Sass 变量与 Map，例如$bootstrap-icons-font-dir、$bootstrap-icons-font-file，以及从$bootstrap-icons-map生成的 class 规则，方便二次定制。

若项目使用 TypeScript，可直接引用 font/bootstrap-icons.ts 中的BootstrapIconsId联合类型，获得图标名的编译期校验。

本地开发与文档预览

仓库的文档站点由 Hugo 驱动。克隆仓库、安装依赖并启动本地服务器：

git clone https://github.com/twbs/icons/ cd icons npm i npm start

然后打开浏览器访问http://localhost:4000即可预览文档。

其中npm start只是docs-serve的别名，后者实际执行：

hugo server --port 4000 --disableFastRender

对应脚本定义可查看 package.json 的scripts字段。

常用 npm 脚本

以下是开发过程中最常用的几个脚本，完整清单以npm run输出为准：

其中pages脚本的实现位于 build/build-pages.mjs：它会遍历icons目录中的每个 SVG，并在 docs/content/icons 下创建对应的 Markdown 页面（已存在则跳过），把「图标文件 → 文档页面」一一对应起来。

新增 SVG 图标的工作流

图标通常由维护者在 Figma 中先行设计，再以加工脚本统一规范化。新增一个图标的完整流程如下：

1. 在 Figma 中以16x16 网格设计新字形；
2. 导出为扁平化（flattened）的 SVG，仅含fill，不包含stroke；
3. 将新 SVG 放入icons目录；
4. 运行npm run icons执行脚本，脚本会完成两步加工：先用 SVGO 优化 SVG，再改写 SVG 源码——移除全部原有属性，并按项目偏好的顺序重新设置属性与取值；
5. 运行npm run pages生成图标对应的独立文档页面，补全页面内容；
6. 在新分支中提交结果以便更新。

注意事项：提交时请排除所有自动生成的文件（如font/**和bootstrap-icons.svg），因为它们极易产生冲突；发行版本的 dist 文件通常会在发版前统一更新。

SVG 加工规则的源码级拆解

SVGO 的优化规则全部集中在 svgo.config.mjs：

• multipass: true：开启多轮迭代优化，压缩更彻底；
• js2svg.pretty: true、indent: 2、eol: 'lf'：保证输出格式统一、便于 diff；
• preset-default覆盖项：
  • removeUnknownsAndDefaults.keepDataAttrs: false：移除所有data属性；
  • removeUnknownsAndDefaults.keepRoleAttr: true：保留role属性（无障碍可访问性）；
  • removeViewBox: false：保留viewBox，确保图标可被缩放；
• removeAttrs：显式移除clip-rule与fill，为后续统一赋值腾出空间；
• 自定义explicitAttrs插件：为每个<svg>按固定顺序写入xmlns、width="16"、height="16"、fill="currentColor"、class="bi bi-{文件名}"、viewBox="0 0 16 16"。

这也是为什么 icons 目录中每个成品 SVG 都能保持「同构、同序、同默认值」——既便于机器解析，也便于人类审阅。

Sprite 与字体、类型、映射的生成

• SVG Sprite：由icons-sprite脚本调用svg-sprite工具生成，配置见 svg-sprite.json。它采用symbol模式输出 bootstrap-icons.svg，关闭命名空间 class 与 XML 声明，并对每个形状做与主流程一致的 SVGO 优化。
• 图标字体：icons-font脚本借助fantasticon从图标生成字体，再由cleancss压缩产出 font/bootstrap-icons.min.css 等文件。
• 一致性校验：test:check-icons会读取 font/bootstrap-icons.json 与icons目录做比对（实现见 build/check-icons.mjs），确保字体映射表与 SVG 源文件不出现增删不一致，从机制上杜绝「有字体没图标」或「有图标没字体」的错位。

发布机制

文档站点与发布包在打上新的 Git Tag 时自动发布。整个发布流水线可以归纳为：

npm run icons # 重新加工图标、生成字体与 Sprite npm run docs-build # 构建文档站点 npm run icons-zip # 产出 bootstrap-icons-<version>.zip

随后打上版本 Tag 触发自动发布，具体可参考 package.json 中的release、release-version脚本及仓库的 CI 工作流配置。

许可证

Bootstrap Icons 基于 MIT 许可证发布（见 LICENSE），可以在商业与非商业项目中自由使用，只需保留版权声明。

小结

Bootstrap Icons 的价值在于「一套图标、多种交付形态」：单个 SVG、SVG Sprite、Web Font 以及配套的类型与映射文件可以按需取用；同时它的仓库本身就是一套完整的「图标工程化」范例——Figma 设计 → 规范化 SVG → SVGO 优化 → 自动生成字体与 Sprite → 自动生成文档页面，全链路均由 package.json 中的脚本串起。无论是想要快速接入图标资源，还是希望借鉴其构建管线，都可以从 README.md 和 build 目录开始深入。

• 前端