Bootstrap Icons：Bootstrap 官方开源 SVG 图标库的安装、使用与二次开发指南

前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载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 SpriteSymbol 模式font由图标自动生成的 Web Font 及其配套 CSS/SCSS/TypeScript/JSON 文件docs基于 Hugo 的官方文档站点当前仓库的版本为 1.13.1见 package.json 的version字段许可协议为 MIT见 LICENSE。安装 Bootstrap IconsBootstrap Icons 已经打包并发布到 npm。需要注意npm 包内只包含加工处理后的 SVG 成品不会附带任何框架层封装具体如何渲染由你和团队自行实现。npm i bootstrap-icons对于使用 Packagist 生态的 PHP/Composer 项目也可以通过 Composer 安装composer require twbs/bootstrap-icons此外该图标库还同步提供 Figma 社区版本方便设计师在原型阶段直接使用同一套视觉资源。安装完成后包的入口产物与仓库发布物一一对应产物说明icons/*.svg单个图标 SVG 文件bootstrap-icons.svgSVG Sprite 文件font/bootstrap-icons.css图标字体 CSSfont/bootstrap-icons.scss图标字体 SCSS 源文件font/bootstrap-icons.ts图标 ID 的 TypeScript 类型定义font/bootstrap-icons.json图标名与字符码映射表这些文件的具体构成可以在 package.json 的files字段中确认。四种使用方式根据项目的技术栈与渲染需求可以选择以下任意一种方式引入图标。1. 直接复制粘贴 SVG内嵌 HTML将 icons 目录中某个 SVG 文件的内容直接粘贴到 HTML 中。加工后的图标文件带有标准化的classbi bi-xxx、width16、height16、fillcurrentColor属性因此可以借助 CSS 控制颜色与尺寸i classbi bi-alarm/i2. 通过img元素引用把 SVG 视为普通图片资源img srcicons/alarm.svg altAlarm width32 height32这种方式的优点是零 CSS 依赖缺点是颜色由文件内的currentColor决定外部不易覆写。3. 使用 SVG Sprite仓库根目录的 bootstrap-icons.svg 是一个标准的 Symbol 型 Sprite每个图标被包裹在symbol idxxx中例如symbol idalarm。引入方式如下svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#alarm/use /svgSprite 方式只需一次 HTTP 请求即可复用任意图标适合图标数量较多的场景。4. 通过 CSS 字体引入引入 font/bootstrap-icons.css或编译 font/bootstrap-icons.scss即可使用bi/bi-xxx类名i classbi-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输出为准Script说明startdocs-serve的别名docs-serve启动本地 Hugo 服务器端口 4000docs-build构建文档站点hugo --cleanDestinationDir --printUnusedTemplatespages为每个图标生成带模板 Markdown 的独立页面icons加工并优化icons目录中的 SVG生成字体与 Spriteicons-zip打包icons、bootstrap-icons.svg与font为发布压缩包test并行运行全部校验ESLint、Stylelint、锁文件、图标一致性等其中pages脚本的实现位于 build/build-pages.mjs它会遍历icons目录中的每个 SVG并在 docs/content/icons 下创建对应的 Markdown 页面已存在则跳过把「图标文件 → 文档页面」一一对应起来。新增 SVG 图标的工作流图标通常由维护者在 Figma 中先行设计再以加工脚本统一规范化。新增一个图标的完整流程如下在 Figma 中以16x16 网格设计新字形导出为扁平化flattened的 SVG仅含fill不包含stroke将新 SVG 放入icons目录运行npm run icons执行脚本脚本会完成两步加工先用 SVGO 优化 SVG再改写 SVG 源码——移除全部原有属性并按项目偏好的顺序重新设置属性与取值运行npm run pages生成图标对应的独立文档页面补全页面内容在新分支中提交结果以便更新。注意事项提交时请排除所有自动生成的文件如font/**和bootstrap-icons.svg因为它们极易产生冲突发行版本的 dist 文件通常会在发版前统一更新。SVG 加工规则的源码级拆解SVGO 的优化规则全部集中在 svgo.config.mjsmultipass: true开启多轮迭代优化压缩更彻底js2svg.pretty: true、indent: 2、eol: lf保证输出格式统一、便于 diffpreset-default覆盖项removeUnknownsAndDefaults.keepDataAttrs: false移除所有data属性removeUnknownsAndDefaults.keepRoleAttr: true保留role属性无障碍可访问性removeViewBox: false保留viewBox确保图标可被缩放removeAttrs显式移除clip-rule与fill为后续统一赋值腾出空间自定义explicitAttrs插件为每个svg按固定顺序写入xmlns、width16、height16、fillcurrentColor、classbi bi-{文件名}、viewBox0 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 目录开始深入。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐WinUtil终极指南一键解决Windows系统优化与软件批量安装难题WinUtil终极指南一键解决Windows系统优化与软件批量安装难题 还在为Windows系统越用越慢而烦恼吗还在为每次重装系统后需要逐个安装几十个软件而桌面应用运维Bootstrap Icons 使用指南SVG 图标库的安装、五种引入方式与无障碍实践Bootstrap Icons 使用指南SVG 图标库的安装、五种引入方式与无障碍实践 本文以 Bootstrap Icons 官方文档 docs/cont前端Bootstrap Icons 开源图标库完整使用指南Bootstrap Icons 开源图标库完整使用指南 Bootstrap Icons 是一个功能强大的开源SVG图标库专为现代Web开发设计。该库包含超过2前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考