Bootstrap Icons 完整实战指南2000 个 SVG 图标如何高效变身 Web 字体【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/iconsBootstrap Icons 是 Bootstrap 官方开源的 SVG 图标库内置 2000 个高质量矢量图标并提供一条从独立 SVG 文件到高性能字体、精灵图与配套 CSS 的完整自动化构建管线。它让前端开发者一次引入、随处调用在页面性能、开发效率和视觉一致性之间取得了很好的平衡是 Web 项目值得优先考虑的图标解决方案。一、为什么你的项目需要一个会变身的图标库先想象一个常见的开发场景你在做一个后台管理系统侧边栏、表格、按钮、空状态里加起来需要五六十个图标。最直观的做法是找一套 PNG 或 SVG 图标然后这样写img srcicons/save.png alt保存 img srcicons/delete.png alt删除功能是实现了但问题也随之而来每个图标都是一次独立的 HTTP 请求页面首屏的请求数被撑爆想换主题色要么准备多套颜色文件要么用 CSS filter 曲线救国图标风格来自不同作者线条粗细、圆角大小参差不齐。而图标字体把上千个矢量图形压缩进一两个字体文件里浏览器只需一次请求即可全部加载。这背后正是 Bootstrap Icons 的构建管线在做变身工作它读取icons/目录下两千多个独立的 SVG 文件经过优化后打包成font/fonts/下的 WOFF2 与 WOFF 字体同时生成配套的 CSS、SCSS、JSON 和 TypeScript 类型定义。对使用者来说这一过程完全透明。二、五分钟跑通先体验开箱即用的快感第一步获取项目并安装依赖打开终端克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/ic/icons cd icons npm install第二步认识font/目录里的四大件安装完成后无需任何构建font/目录已经为你准备好了全部产物文件作用font/bootstrap-icons.css完整样式表含font-face与所有图标类font/bootstrap-icons.min.css压缩版生产环境推荐使用font/fonts/bootstrap-icons.woff2高性能字体现代浏览器首选font/fonts/bootstrap-icons.woff兼容性字体作为回退方案font/bootstrap-icons.scssSass 变量与映射方便二次定制font/bootstrap-icons.tsTypeScript 图标名类型享受代码提示第三步写出一行能跑的图标在 HTML 中引入 CSS然后使用bi前缀的类名link relstylesheet hreffont/bootstrap-icons.min.css i classbi bi-alarm/i i classbi bi-arrow-right stylecolor: #0d6efd;/i i classbi bi-check-circle-fill text-success/i刷新页面三个图标应当正常显示。到这里你已经用上了绝大多数项目所需的基础能力。三、四种调用方式按场景对号入座方式一CSS 类名调用日常首选Bootstrap Icons 的 CSS 内部为每个图标生成了形如.bi-alarm::before { content: \f102; }的规则图标实际上是字体里的一个字符。因为它是文字所以继承color、font-size等所有文字属性这是它最强大的地方i classbi bi-bell/i i classbi bi-cart-check text-primary/i适用场景按钮、表单、导航栏等 90% 的界面场景。简单、可缓存、渲染稳定。方式二SVG 精灵图引用如果你需要比纯色字体更精细的控制比如给图标局部上不同的颜色那就用精灵图。项目根目录的bootstrap-icons.svg包含了全部符号定义svg classbi width32 height32 fillcurrentColor use xlink:hrefbootstrap-icons.svg#alarm/ /svg精灵图把两千多个符号集中在一个文件里仍然只有一次请求同时保留了 SVG 的灵活性。方式三内联 SVG 嵌入直接复制icons/alarm.svg的内容到 HTML 中svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-alarm viewBox0 0 16 16 path dM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9z/ path dM6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1zm1.038 3.018a6 6 0 0 1 .924 0 6 6 0 1 1-.924 0M0 3.5c0 .753.333 1.429.86 1.887A8.04 8.04 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5M13.5 1c-.753 0-1.429.333-1.887.86a8.04 8.04 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1/ /svg适用场景对某个图标做 CSS 动画、多个路径局部着色、或者只需要零星几个图标的轻量页面。代价是每个图标都占一段 HTML适合数量少、定制强的场景。方式四图片标签引用对于完全静态、不需要交互的场合直接用img引用icons/下的独立文件即可img srcicons/alarm.svg alt闹钟图标 width32 height32四种方式的取舍可以归结为一张表方式请求数可定制性推荐场景CSS 类名1 次字体颜色/大小极强局部上色弱通用界面默认首选SVG 精灵图1 次强可局部上色图标较多样式要求时内联 SVG每处一段代码最强动画、少量图标、深度定制img 标签每图一次弱静态展示、临时方案四、进阶调优亲手跑通SVG 到字体的构建管线项目真正的价值在于它把从素材到成品的整套流程自动化了。理解这条管线你就能往里塞自己的图标做出我的图标库。构建的三个阶段在项目根目录执行npm run icons这个命令会依次完成三件事对应三个脚本1. 优化 SVG 源文件icons-main脚本读取icons/*.svg用 SVGO 做多轮压缩然后按svgo.config.mjs中的自定义插件统一写入标准属性width16 height16、fillcurrentColor、classbi bi-图标名、viewBox0 0 16 16。这保证了每个图标都有相同的坐标系和继承颜色的能力——这也是为什么你在页面里给color就能换色的根本原因。2. 生成精灵图icons-spritesvg-sprite工具按svg-sprite.json的配置把全部图标打包为根目录下的bootstrap-icons.svg符号表供前面的方式二使用。3. 生成字体icons-fontfantasticon把优化后的 SVG 合成为 WOFF/WOFF2 字体随后cleancss压缩 CSS。最终在font/下产出bootstrap-icons.css与bootstrap-icons.min.cssbootstrap-icons.scss含$bootstrap-icons-map每个图标名映射到字体码位bootstrap-icons.jsonbootstrap-icons.tsBootstrapIconsId联合类型Vue/React 封装时能获得完整补全加入一个自定义图标的完整步骤假设你要新增一个公司 Logo 图标把设计好的 SVG 放入icons/目录命名为company-logo.svg建议先统一为 16×16 的 viewBox在根目录执行npm run icons检查font/bootstrap-icons.css中是否出现了.bi-company-logo::before页面里直接使用i classbi bi-company-logo/i。⚠️ 两个高频坑位需要提前避开源 SVG 不要写死fill#333这类固定颜色否则构建时会被移除或导致无法继承主题色文件名即类名务必使用小写字母与连字符避免大写、空格和中文。五、性能与工程化的最佳实践优先交付 WOFF2WOFF2 压缩率更高体积通常比 WOFF 小 30% 左右。CSS 中的font-face已按 WOFF2 → WOFF 的顺序声明浏览器会自动选择支持的最好格式生产环境无需改动。给字体文件设置长缓存字体属于变化频率极低、复用度极高的静态资源值得让浏览器长期缓存。以 Nginx 为例location ~* \.(woff2|woff)$ { expires 1y; add_header Cache-Control public, immutable; }同时注意bootstrap-icons.css的字体 URL 带有构建哈希版本升级后 URL 变化会自然绕过旧缓存不必担心永久缓存导致更新不到。按需加载而非全量引入对大型后台系统可以考虑只在使用图标的页面引入字体。一个轻量做法是监听 DOM 中的bi-类再动态注入样式if (document.querySelector(.bi-alarm)) { const link document.createElement(link); link.rel stylesheet; link.href font/bootstrap-icons.min.css; document.head.appendChild(link); }用框架封装去掉重复样板在 React 中封装一个图标组件把类名和尺寸收敛到一处function Icon({ name, size 16, color currentColor }) { return ( i className{bi bi-${name}} style{{ fontSize: size, color }} / ); } // 使用 Icon namealarm size{24} /如果使用 TypeScript还可以基于font/bootstrap-icons.ts导出的BootstrapIconsId类型约束name属性让编辑器帮你杜绝拼写错误。六、高频问题排查图标显示成方框几乎都是字体没加载或类名拼错。依次检查浏览器 Network 面板里bootstrap-icons.woff2是否 200CSS 文件路径是否与页面相对位置一致类名是否为bi bi-xxx双类格式且xxx与 CSS 中的定义完全一致。图标颜色改不动原因通常是字体图标没有继承文字颜色。确认你没有在图标内层强制设置颜色正确的做法是!-- 正确继承或指定文字颜色 -- i classbi bi-alarm text-primary/i !-- 正确直接指定颜色 -- i classbi bi-alarm stylecolor: red;/i图标大小忽大忽小字体图标的大小由font-size决定width/height对它不生效。需要统一尺寸时用字号.bi-custom { font-size: 2rem; /* 32px */ }npm run icons构建报错先检查图标文件是否规范SVG 是否可被 SVGO 正常解析、文件名是否符合命名规则、是否出现了重复文件名。再确认 Node 版本满足package.json中的engines要求必要时删除node_modules后重新npm install。七、写在最后Bootstrap Icons 的价值不只是又多了一套图标而是把获取图标 → 优化 → 打包 → 交付这件事做成了一条完整、可复用的自动化管线。对普通项目引入font/下的成品即可高效上线对定制需求npm run icons让你随时能把新图标变成一等公民而对工程化团队WOFF2 优先、缓存策略、按需加载和框架封装这些手段组合起来能让图标在大型项目里依然保持轻盈。现在就把第一个图标放进你的页面吧——打开终端、克隆仓库、执行npm install然后写下i classbi bi-rocket-takeoff/i让项目从一枚小小的图标开始起飞。【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Bootstrap Icons 完整实战指南：2000+ 个 SVG 图标如何高效变身 Web 字体
Bootstrap Icons 完整实战指南2000 个 SVG 图标如何高效变身 Web 字体【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/iconsBootstrap Icons 是 Bootstrap 官方开源的 SVG 图标库内置 2000 个高质量矢量图标并提供一条从独立 SVG 文件到高性能字体、精灵图与配套 CSS 的完整自动化构建管线。它让前端开发者一次引入、随处调用在页面性能、开发效率和视觉一致性之间取得了很好的平衡是 Web 项目值得优先考虑的图标解决方案。一、为什么你的项目需要一个会变身的图标库先想象一个常见的开发场景你在做一个后台管理系统侧边栏、表格、按钮、空状态里加起来需要五六十个图标。最直观的做法是找一套 PNG 或 SVG 图标然后这样写img srcicons/save.png alt保存 img srcicons/delete.png alt删除功能是实现了但问题也随之而来每个图标都是一次独立的 HTTP 请求页面首屏的请求数被撑爆想换主题色要么准备多套颜色文件要么用 CSS filter 曲线救国图标风格来自不同作者线条粗细、圆角大小参差不齐。而图标字体把上千个矢量图形压缩进一两个字体文件里浏览器只需一次请求即可全部加载。这背后正是 Bootstrap Icons 的构建管线在做变身工作它读取icons/目录下两千多个独立的 SVG 文件经过优化后打包成font/fonts/下的 WOFF2 与 WOFF 字体同时生成配套的 CSS、SCSS、JSON 和 TypeScript 类型定义。对使用者来说这一过程完全透明。二、五分钟跑通先体验开箱即用的快感第一步获取项目并安装依赖打开终端克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/ic/icons cd icons npm install第二步认识font/目录里的四大件安装完成后无需任何构建font/目录已经为你准备好了全部产物文件作用font/bootstrap-icons.css完整样式表含font-face与所有图标类font/bootstrap-icons.min.css压缩版生产环境推荐使用font/fonts/bootstrap-icons.woff2高性能字体现代浏览器首选font/fonts/bootstrap-icons.woff兼容性字体作为回退方案font/bootstrap-icons.scssSass 变量与映射方便二次定制font/bootstrap-icons.tsTypeScript 图标名类型享受代码提示第三步写出一行能跑的图标在 HTML 中引入 CSS然后使用bi前缀的类名link relstylesheet hreffont/bootstrap-icons.min.css i classbi bi-alarm/i i classbi bi-arrow-right stylecolor: #0d6efd;/i i classbi bi-check-circle-fill text-success/i刷新页面三个图标应当正常显示。到这里你已经用上了绝大多数项目所需的基础能力。三、四种调用方式按场景对号入座方式一CSS 类名调用日常首选Bootstrap Icons 的 CSS 内部为每个图标生成了形如.bi-alarm::before { content: \f102; }的规则图标实际上是字体里的一个字符。因为它是文字所以继承color、font-size等所有文字属性这是它最强大的地方i classbi bi-bell/i i classbi bi-cart-check text-primary/i适用场景按钮、表单、导航栏等 90% 的界面场景。简单、可缓存、渲染稳定。方式二SVG 精灵图引用如果你需要比纯色字体更精细的控制比如给图标局部上不同的颜色那就用精灵图。项目根目录的bootstrap-icons.svg包含了全部符号定义svg classbi width32 height32 fillcurrentColor use xlink:hrefbootstrap-icons.svg#alarm/ /svg精灵图把两千多个符号集中在一个文件里仍然只有一次请求同时保留了 SVG 的灵活性。方式三内联 SVG 嵌入直接复制icons/alarm.svg的内容到 HTML 中svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-alarm viewBox0 0 16 16 path dM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9z/ path dM6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1zm1.038 3.018a6 6 0 0 1 .924 0 6 6 0 1 1-.924 0M0 3.5c0 .753.333 1.429.86 1.887A8.04 8.04 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5M13.5 1c-.753 0-1.429.333-1.887.86a8.04 8.04 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1/ /svg适用场景对某个图标做 CSS 动画、多个路径局部着色、或者只需要零星几个图标的轻量页面。代价是每个图标都占一段 HTML适合数量少、定制强的场景。方式四图片标签引用对于完全静态、不需要交互的场合直接用img引用icons/下的独立文件即可img srcicons/alarm.svg alt闹钟图标 width32 height32四种方式的取舍可以归结为一张表方式请求数可定制性推荐场景CSS 类名1 次字体颜色/大小极强局部上色弱通用界面默认首选SVG 精灵图1 次强可局部上色图标较多样式要求时内联 SVG每处一段代码最强动画、少量图标、深度定制img 标签每图一次弱静态展示、临时方案四、进阶调优亲手跑通SVG 到字体的构建管线项目真正的价值在于它把从素材到成品的整套流程自动化了。理解这条管线你就能往里塞自己的图标做出我的图标库。构建的三个阶段在项目根目录执行npm run icons这个命令会依次完成三件事对应三个脚本1. 优化 SVG 源文件icons-main脚本读取icons/*.svg用 SVGO 做多轮压缩然后按svgo.config.mjs中的自定义插件统一写入标准属性width16 height16、fillcurrentColor、classbi bi-图标名、viewBox0 0 16 16。这保证了每个图标都有相同的坐标系和继承颜色的能力——这也是为什么你在页面里给color就能换色的根本原因。2. 生成精灵图icons-spritesvg-sprite工具按svg-sprite.json的配置把全部图标打包为根目录下的bootstrap-icons.svg符号表供前面的方式二使用。3. 生成字体icons-fontfantasticon把优化后的 SVG 合成为 WOFF/WOFF2 字体随后cleancss压缩 CSS。最终在font/下产出bootstrap-icons.css与bootstrap-icons.min.cssbootstrap-icons.scss含$bootstrap-icons-map每个图标名映射到字体码位bootstrap-icons.jsonbootstrap-icons.tsBootstrapIconsId联合类型Vue/React 封装时能获得完整补全加入一个自定义图标的完整步骤假设你要新增一个公司 Logo 图标把设计好的 SVG 放入icons/目录命名为company-logo.svg建议先统一为 16×16 的 viewBox在根目录执行npm run icons检查font/bootstrap-icons.css中是否出现了.bi-company-logo::before页面里直接使用i classbi bi-company-logo/i。⚠️ 两个高频坑位需要提前避开源 SVG 不要写死fill#333这类固定颜色否则构建时会被移除或导致无法继承主题色文件名即类名务必使用小写字母与连字符避免大写、空格和中文。五、性能与工程化的最佳实践优先交付 WOFF2WOFF2 压缩率更高体积通常比 WOFF 小 30% 左右。CSS 中的font-face已按 WOFF2 → WOFF 的顺序声明浏览器会自动选择支持的最好格式生产环境无需改动。给字体文件设置长缓存字体属于变化频率极低、复用度极高的静态资源值得让浏览器长期缓存。以 Nginx 为例location ~* \.(woff2|woff)$ { expires 1y; add_header Cache-Control public, immutable; }同时注意bootstrap-icons.css的字体 URL 带有构建哈希版本升级后 URL 变化会自然绕过旧缓存不必担心永久缓存导致更新不到。按需加载而非全量引入对大型后台系统可以考虑只在使用图标的页面引入字体。一个轻量做法是监听 DOM 中的bi-类再动态注入样式if (document.querySelector(.bi-alarm)) { const link document.createElement(link); link.rel stylesheet; link.href font/bootstrap-icons.min.css; document.head.appendChild(link); }用框架封装去掉重复样板在 React 中封装一个图标组件把类名和尺寸收敛到一处function Icon({ name, size 16, color currentColor }) { return ( i className{bi bi-${name}} style{{ fontSize: size, color }} / ); } // 使用 Icon namealarm size{24} /如果使用 TypeScript还可以基于font/bootstrap-icons.ts导出的BootstrapIconsId类型约束name属性让编辑器帮你杜绝拼写错误。六、高频问题排查图标显示成方框几乎都是字体没加载或类名拼错。依次检查浏览器 Network 面板里bootstrap-icons.woff2是否 200CSS 文件路径是否与页面相对位置一致类名是否为bi bi-xxx双类格式且xxx与 CSS 中的定义完全一致。图标颜色改不动原因通常是字体图标没有继承文字颜色。确认你没有在图标内层强制设置颜色正确的做法是!-- 正确继承或指定文字颜色 -- i classbi bi-alarm text-primary/i !-- 正确直接指定颜色 -- i classbi bi-alarm stylecolor: red;/i图标大小忽大忽小字体图标的大小由font-size决定width/height对它不生效。需要统一尺寸时用字号.bi-custom { font-size: 2rem; /* 32px */ }npm run icons构建报错先检查图标文件是否规范SVG 是否可被 SVGO 正常解析、文件名是否符合命名规则、是否出现了重复文件名。再确认 Node 版本满足package.json中的engines要求必要时删除node_modules后重新npm install。七、写在最后Bootstrap Icons 的价值不只是又多了一套图标而是把获取图标 → 优化 → 打包 → 交付这件事做成了一条完整、可复用的自动化管线。对普通项目引入font/下的成品即可高效上线对定制需求npm run icons让你随时能把新图标变成一等公民而对工程化团队WOFF2 优先、缓存策略、按需加载和框架封装这些手段组合起来能让图标在大型项目里依然保持轻盈。现在就把第一个图标放进你的页面吧——打开终端、克隆仓库、执行npm install然后写下i classbi bi-rocket-takeoff/i让项目从一枚小小的图标开始起飞。【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考