前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载cloud-rain-fill乌云降雨实心图标是 Bootstrap Icons 官方开源图标库中 Weather天气分类下的一个图标对应仓库中 docs/content/icons/cloud-rain-fill.md 这一图标文档页。本文将以该文档为核心结合仓库内的 SVG 源码、字体构建产物与 Hugo 文档模板完整讲解这个图标的设计结构、四种前端接入方式、字体码点机制以及它从源文件到成品的构建链路。读完本文你将能直接在自己的 Bootstrap 或任意前端项目里正确引入该图标并理解 Bootstrap Icons 图标体系的底层工作方式。一、图标速览一个 SVG 源文件与它的全部元数据Bootstrap Icons 仓库中每一个图标都遵循「一个 SVG 源文件 一份 Markdown 文档」的组织方式。cloud-rain-fill 的文档页docs/content/icons/cloud-rain-fill.md以 Hugo Front Matter 形式定义了该图标的元信息--- title: Cloud rain fill categories: - Weather tags: - cloud - rainstorm - storm ---从这份元数据可以确认该图标的核心属性属性值说明图标名cloud-rain-fill命名遵循主题-修饰符规则fill表示实心填充版本分类Weather与天气相关的图标归入此类标签cloud / rainstorm / storm用于文档站搜索与检索的语义标签源文件icons/cloud-rain-fill.svg位于仓库icons/目录画布16 × 16viewBox0 0 16 16所有图标统一在 16px 网格上设计配色fillcurrentColor颜色随 CSScolor属性变化字体码点\f2b3十进制 62131详见下文「字体码点」一节注意fill修饰符不只是「同名的实心变体」每个变体都是独立设计、独立发布、独立码点的图标。cloud-rain-fill 与 cloud-rain 是两枚并存且并列的图标不可混淆。二、从 SVG 源码看图形设计云体与雨滴的路径结构打开 icons/cloud-rain-fill.svg完整源码如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-cloud-rain-fill viewBox0 0 16 16 path dM4.158 12.025a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 1 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m3 0a.5.5 0 0 1 .316.633l-1 3a.5.5 0 1 1-.948-.316l1-3a.5.5 0 0 1 .632-.317m3 0a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 1 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m3 0a.5.5 0 0 1 .316.633l-1 3a.5.5 0 1 1-.948-.316l1-3a.5.5 0 0 1 .632-.317m.247-6.998a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 11H13a3 3 0 0 0 .405-5.973/ /svg整个图形由一条复合路径path构成可以拆解为两层语义1. 四滴雨滴m相对位移段路径以四段m3 0/m3 0/m3 0起始的短线组合表示四滴雨每两滴一组交替出现「短雨滴下延 1.5 单位」与「长雨滴下延 3 单位」形成错落的降雨节奏。每段雨滴都用a.5.5 0 0 1 .316.633l...这样的半圆头 直线收尾描画配合.948长度的反向弧线完成闭合视觉上是一头圆润、一头尖细的雨点造型。2. 云体一段大圆弧路径剩余部分M.247-6.998a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 11H13a3 3 0 0 0 .405-5.973通过多次aarc与H水平线命令绘制出下平上拱的乌云轮廓——左侧以半径 5.001 的圆弧构成云顶中部过渡到半径 3.5 的圆弧右侧以半径 3 的圆弧收拢底边由直线闭合。因为是fill实心版本云体与雨滴共用一个填充色整枚图标呈剪影式呈现。对照其线框版本 icons/cloud-rain.svg 可以发现设计上的对称差异线框版云体由空心轮廓构成内部以另一条圆弧镂空雨滴使用fill-rule语义的独立填充路径而 fill 版将云体与雨滴合并为实心整体更适合在需要高对比度、小尺寸场景下使用。三、图标家族对照cloud-rain 与天气降水系列cloud-rain-fill 并非孤例Bootstrap Icons 围绕「云 降水」构建了一整套主题一致的天气图标。查阅 font/bootstrap-icons.scss 中的字体映射表$bootstrap-icons-map可以找到整个降水家族及各自的字体码点图标名SCSS 码点语义cloud-drizzle-fill\f29c毛毛雨实心cloud-drizzle\f29d毛毛雨线框cloud-hail-fill\f2a3冰雹实心cloud-hail\f2a4冰雹线框cloud-rain-fill\f2b3降雨实心即本文主题cloud-rain-heavy-fill\f2b4大雨实心cloud-rain-heavy\f2b5大雨线框cloud-rain\f2b6降雨线框cloud-sleet-fill\f2b9雨夹雪实心cloud-sleet\f2ba雨夹雪线框cloud-snow-fill\f2bb降雪实心cloud-snow\f2bc降雪线框从源码结构可以推断这些图标在设计稿阶段基于同一套 16×16 网格与相同的云体骨架演化而来仅通过雨滴密度、形态点状 / 短条 / 长条 / 雪花区分天气强度。实际选择时若表达普通降雨天气cloud-rain-fill是最常用的实心选项需要强调雨量时则升级为cloud-rain-heavy-fill。四、在项目中实际使用 cloud-rain-fillBootstrap Icons 的官方使用方式有四种READMEREADME.md中对此有明确说明内联 SVG、img引用、SVG 雪碧图sprite、CSS 字体。下面逐一给出 cloud-rain-fill 的可直接运行示例。方式一内联 SVG推荐可控性最强直接拷贝 icons/cloud-rain-fill.svg 源码到 HTML 中利用currentColor即可跟随文字颜色svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-cloud-rain-fill viewBox0 0 16 16 path dM4.158 12.025a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 1 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m3 0a.5.5 0 0 1 .316.633l-1 3a.5.5 0 1 1-.948-.316l1-3a.5.5 0 0 1 .632-.317m3 0a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 1 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317m3 0a.5.5 0 0 1 .316.633l-1 3a.5.5 0 1 1-.948-.316l1-3a.5.5 0 0 1 .632-.317m.247-6.998a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 11H13a3 3 0 0 0 .405-5.973/ /svg调整尺寸只需修改width/height或通过 CSSfont-size控制内联 SVG 的缩放修改颜色只需设置color.bi-cloud-rain-fill { color: #0d6efd; /* Bootstrap primary 蓝仅示意 */ font-size: 2rem; }方式二img元素引用适合静态图标场景同样继承 SVG 的currentColor特性img srcicons/cloud-rain-fill.svg altCloud rain fill width32 height32方式三SVG Symbol 雪碧图仓库根目录的 bootstrap-icons.svg 是把全部图标打包为symbol的雪碧图文件cloud-rain-fill 对应idcloud-rain-fill的 symbol。使用方式svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#cloud-rain-fill/use /svg该雪碧图由npm run icons通过 svg-sprite.json 配置的 svg-sprite 工具生成构建时会移除fill属性以保持currentColor可控详见 svg-sprite.json 中removeAttrs插件配置。方式四Icon FontCSS / SCSS这是最轻量的接入方式仅需引入 font/bootstrap-icons.css或压缩版 font/bootstrap-icons.min.css即可使用类名i classbi bi-cloud-rain-fill/i对应地font/bootstrap-icons.css 中为每个图标生成了伪元素规则.bi-cloud-rain-fill::before { content: \f2b3; }字体文件位于 font/fonts/bootstrap-icons.woff2 与 font/fonts/bootstrap-icons.woff由font-face加载同时提供 SCSS 版本 font/bootstrap-icons.scss含$bootstrap-icons-map映射表便于在 Sass 项目中做变量级定制。五、字体码点UF2B3 与四种书写形式通过字体方式使用时码点code point是底层关键。仓库的码点清单维护在 font/bootstrap-icons.json其中cloud-rain-fill: 6213162131 的十六进制即F2B3。文档站的图标单页模板 docs/layouts/icons/single.html 会读取该 JSON 并渲染出四种等价写法以 cloud-rain-fill 代入形式写法UnicodeUF2B3CSS\f2b3JS\uf2b3HTML 实体#xf2b3;这一机制意味着只要字体文件加载成功即使不借助任何类名也能通过字符实体渲染该图标。同时font/bootstrap-icons.ts 中声明了cloud-rain-fill这一联合类型成员为 TypeScript 项目提供了图标名的编译期类型校验。六、从 SVG 到成品构建管线是怎么跑的cloud-rain-fill 之所以同时存在 SVG 源文件、CSS、SCSS、JSON、TS、雪碧图和字体等多个产物是因为 package.json 中定义了一套完整的构建流程。关键脚本如下npm 脚本实际命令职责iconsicons-main 并行icons-sprite、icons-font一键重建全部图标产物icons-mainnode build/build-svgs.mjs用 SVGO 优化并规范化icons/下的 SVGicons-spritesvg-sprite --config svg-sprite.json icons/*.svg生成bootstrap-icons.svg雪碧图icons-font-mainfantasticon由 SVG 生成字体与 CSS/JSON/TS 等映射文件icons-font-mincleancss压缩产出font/bootstrap-icons.min.csspagesnode build/build-pages.mjs为每个图标生成文档站页面test:check-iconsnode build/check-icons.mjs校验图标目录与产物的一致性从源码结构可以推断SVG 优化环节由 svgo.config.mjs 与 svg-sprite.json 中的 SVGO 插件共同约束例如保留viewBox、移除冗余fill属性从而保证最终发布的 SVG 都是统一规范的最小体积形态字体化则依赖 fantasticon 将每枚 SVG 映射为字体码点。因此对使用者而言始终以icons/目录中的 SVG 为唯一事实源font/目录与bootstrap-icons.svg均为自动生成产物README 也明确提示不要手动维护这些自动生成文件。七、图标文档页是如何生成的docs 目录是构建在 Hugo 之上的文档站hugo.yml 为站点配置。docs/content/icons/cloud-rain-fill.md 这类 Front Matter 文档由 Hugo 模板 docs/layouts/icons/single.html 渲染模板会通过printf /icons/%s.svg .File.TranslationBaseName定位对应 SVG 源文件并内嵌展示展示 Tags 与 Category 元信息即本图标文档中声明的 Weather 分类与 cloud / rainstorm / storm 标签自动生成「Icon font」类名片段i classbi bi-cloud-rain-fill/i、「Code point」四联表上一节的 UF2B3 等以及「Copy HTML」的 SVG 内联代码提供「Download SVG」下载入口与多种尺寸的示例渲染。这意味着本文第一节所见的 Markdown 文档本质是图标页的「内容骨架」而页面上的全部使用信息均由模板与源码产物联动生成。本地预览文档站可执行npm i npm start # 等价于 npm run docs-serve启动 Hugo 于 http://localhost:4000八、定制与注意事项小结使用 cloud-rain-fill 时有几点值得留意颜色统一由currentColor驱动无论是内联 SVG、雪碧图还是字体方式图标颜色都跟随color因此不要在 CSS 中直接对path写死fill以免失去主题联动能力。实心与线框版本按场景取舍cloud-rain-fill为实心剪影适合小尺寸、高对比度、状态强调场景cloud-rain线框更轻量适合大尺寸、装饰性场景。二者码点不同\f2b6不可互相替代。字体方式需确保字体文件正确部署CSS 通过相对路径引用 font/fonts/ 下的 woff/woff2若发布路径变化需同步调整font-face的src。TypeScript 项目可直接受益font/bootstrap-icons.ts 导出的联合类型能帮助在编译期拦截不存在的图标名。综上cloud-rain-fill 虽只是 Bootstrap Icons 两千余枚图标中的一枚却完整承载了该图标库从「Figma 16px 网格设计」到「SVG 优化、字体编码、雪碧图打包、文档站渲染」的全套工程理念。理解它的 SVG 结构、码点与构建产物之间的关系即可举一反三地掌握整个 Bootstrap Icons 的使用与定制方法。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 的 basket2-fill 图标从 SVG 源码到字体与雪碧图的完整使用指南Bootstrap Icons 的 basket2 fill 图标从 SVG 源码到字体与雪碧图的完整使用指南 Bootstrap Icons 官方开源图标库前端Bootstrap Icons clipboard-heart 图标完全指南SVG 源码、图标字体与雪碧图使用详解Bootstrap Icons clipboard heart 图标完全指南SVG 源码、图标字体与雪碧图使用详解 clipboard heart 是 Boo前端Bootstrap Icons 之 cloud-minus-fill 图标从 SVG 源码到字体编码的完整解析Bootstrap Icons 之 cloud minus fill 图标从 SVG 源码到字体编码的完整解析 导读 cloud minus fill 是前端上一篇Open-Sora 快速上手指南3 步生成你的第一条 AI 视频下一篇Notepad-- 实战从编译到批量查找替换创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考