前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载diamond-half是 Bootstrap Icons 官方图标库中 Shapes形状分类下的一个基础几何图标呈现「左侧空心、右侧实心」的半填充菱形。本文以仓库中该图标的实际文档元数据、SVG 源文件、字体码点数据与 Hugo 渲染模板为依据逐段拆解其矢量路径的绘制逻辑对比diamond、diamond-fill两个同族图标并给出内联 SVG、图标字体、CSS 类等多种可复制的使用方案帮助你在项目里正确选用与定制这一类形状图标。图标元数据一份极简的文档入口在 Bootstrap Icons 仓库中每个图标对应docs/content/icons/目录下的一个 Markdown 文件diamond-half的文档为 docs/content/icons/diamond-half.md其内容只包含一段极简的 frontmatter--- title: Diamond half fill categories: - Shapes tags: - shape ---title图标显示名Diamond half fillcategories归类为Shapes形状与diamond、diamond-fill等图标同属一个分类tags检索标签shape。这份元数据并不直接承载正文而是被 Hugo 静态站点生成器消费真正渲染出的图标详情页大图预览、示例、下载、字体用法、码点等全部由模板动态生成具体逻辑见 docs/layouts/icons/single.html。该模板从docs/content/icons/读取 Markdown 的title/categories/tags渲染标题与标签再按文件名diamond-half拼出/icons/diamond-half.svg路径读取 SVG 源码并从font/bootstrap-icons.json中查出该图标的 Unicode 码点。因此想给 Bootstrap Icons 新增或修改一个图标的文档核心要写的就是这样一段 frontmatter。SVG 源码逐段拆解半填充效果是怎么画出来的图标源文件位于 icons/diamond-half.svg完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-diamond-half viewBox0 0 16 16 path dM9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098zM8 .989c.127 0 .253.049.35.145l6.516 6.516a.495.495 0 0 1 0 .7L8.35 14.866a.5.5 0 0 1-.35.145z/ /svg关键属性viewBox0 0 16 16默认渲染尺寸width16 height16与整个图标库 16×16 的设计网格一致fillcurrentColor图标颜色继承外层 CSS 的color值这是 Bootstrap Icons 能通过一行 CSS 改变所有图标颜色的根本原因classbi bi-diamond-half同时保留类名便于 CSS 选择器定位d属性中实际包含两个子路径由M命令分隔这是实现「半填充」的核心。子路径 1左侧空心轮廓M9.05.435 c-.58-.58-1.52-.58-2.1 0 L.436 6.95 c-.58.58-.58 1.519 0 2.098 l6.516 6.516 c.58.58 1.519.58 2.098 0 l6.516-6.516 c.58-.58.58-1.519 0-2.098 z从顶部右侧点(9.05, 0.435)出发用一条三次贝塞尔曲线c-.58-.58-1.52-.58-2.1 0平滑收束到顶部顶点(6.95, 0.435)随后L直线连到左侧顶点(0.436, 6.95)再用曲线滑过底部顶点到右侧最后z闭合。注意这条路径的走向覆盖了菱形的左半边界顶→左→下→右下半段即图中透明的那一侧。子路径 2右侧实心填充M8 .989 c.127 0 .253.049.35.145 l6.516 6.516 a.495.495 0 0 1 0 .7 L8.35 14.866 a.5.5 0 0 1-.35.145 z从菱形顶部中心(8, 0.989)开始l6.516 6.516直线到右侧顶点附近a圆弧命令画出右侧的弧形转角再L回到底部中心(8.35, 14.866)并闭合。这条子路径恰好覆盖菱形的右半边被填充为实色。两段路径叠加便得到「左空右实」的 half-fill 视觉左侧呈现轮廓线右侧呈现实体块。这也解释了图标名的由来——half指填充面积恰好是完整菱形的一半。同族三态对比diamond、diamond-fill、diamond-half仓库中该图标家族共有三个成员源文件均位于icons/目录图标源文件效果路径结构diamondicons/diamond.svg空心轮廓单条闭合轮廓路径无填充diamond-fillicons/diamond-fill.svg整体实心单条fill-ruleevenodd闭合路径整块填充diamond-halficons/diamond-half.svg左空右实两条子路径左侧轮廓 右侧填充diamond-fill的路径以fill-ruleevenodd声明奇偶填充规则配合单条路径即可实现整面填充同时保持坐标点与diamond完全对齐起点6.95.435一致保证三个图标在同一 16×16 网格中形态精确重合三者的 SVG 元信息viewBox、fillcurrentColor、bi bi-*类名完全一致因此它们可以无缝混用、自由切换而不必担心对齐或尺寸差异。在需要表达「二选一」「开关」「层级关系」等语义时半填充菱形比纯轮廓更醒目又比整体实心更轻量是介于两者之间的中间态选择。字体方式使用码点与三种转义写法除了内联 SVGBootstrap Icons 还以图标字体形式分发。diamond-half的字体码点记录在 font/bootstrap-icons.jsondiamond-half: 62192十进制62192换算为十六进制即0xF2F0对应Unicode UF2F0。同族图标的码点是连续的diamond-fill为 62191UF2EFdiamond为 62193UF2F1这也印证了三者「同一批设计与同一批生成」的关系。根据 docs/layouts/icons/single.html 模板对码点的渲染方式UF2F0 在四种场景下的写法分别是Unicode 码点UF2F0CSS 转义\F2F0JS 转义\uF2F0HTML 实体#xF2F0;字体方式的使用非常直接——引入 font/bootstrap-icons.css 后一行i标签即可渲染i classbi bi-diamond-half/i该 CSS 类名与 SVG 中的bi bi-diamond-half保持一致相关字体定义可在 font/bootstrap-icons.scss 与 font/bootstrap-icons.css 中找到搜索diamond-half即可定位.bi-diamond-half:before { content: \F2F0; }一类的规则。实战用法三种方式在项目中的应用1. 内联 SVG推荐可控性最强将 icons/diamond-half.svg 的svg元素直接粘贴进 HTML。由于默认使用currentColor可通过父元素color改变颜色并可用 CSS 调整尺寸svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-diamond-half viewBox0 0 16 16 path dM9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098zM8 .989c.127 0 .253.049.35.145l6.516 6.516a.495.495 0 0 1 0 .7L8.35 14.866a.5.5 0 0 1-.35.145z/ /svg.icon-hero { color: #6f42c1; /* 通过 color 控制图标颜色 */ font-size: 2rem; /* 内联 SVG 随字号放大 */ }2. 图标字体适用于大批量、纯色场景性能好且可直接嵌入文本流link relstylesheet hreffont/bootstrap-icons.css p状态说明 i classbi bi-diamond-half/i/p也可用任意一种码点转义如 CSScontent: \F2F0、JS\uF2F0、HTML#xF2F0;配合自定义字体类使用。3. 按钮、链接等 UI 元素参考 docs/layouts/icons/single.html 中模板自动生成的 Examples 区域该图标在文档页中会以 10em 大预览、标题内联、正文内联、链接、按钮、按钮组、输入框前缀等场景被反复演示你可以照搬这些组合button typebutton classbtn btn-primary svg ...!-- diamond-half SVG --/svg 提交 /button span classinput-group-text svg ...!-- diamond-half SVG --/svg /span在文档站中该图标页面是如何生成的若你想基于这个图标搭建自己的图标文档站可以直接复用仓库的 Hugo 方案在docs/content/icons/下放置带 frontmatter 的 Markdown如diamond-half.md声明title/categories/tags在icons/下放置同名的.svg文件图标详情页由 docs/layouts/icons/single.html 渲染list.htmldocs/layouts/icons/list.html则负责图标总览列表。single.html 的关键逻辑链printf /icons/%s.svg .File.TranslationBaseName按文件名定位 SVG →readFile读取并safeHTML内联输出 →resources.Get font/bootstrap-icons.json与transform.Unmarshal解析码点 →printf %X换算十六进制后输出 Unicode / CSS / JS / HTML 四种写法。也就是说只要 SVG 与 JSON 码点数据正确图标页的所有展示内容预览、示例、下载、码点都会自动生成。小结diamond-half是 Bootstrap Icons 形状家族中实现「半填充」语义的典型代表两段子路径左侧轮廓 右侧填充在 16×16 网格上精确拼合出半实心菱形currentColor让它天然适配任意主题色字体码点 UF2F0 则提供了一条脱离 SVG 的轻量使用路径。无论你是要在 UI 中表达开关/层级语义还是想照葫芦画瓢为图标库贡献同风格的新图标都可以从 icons/diamond-half.svg、font/bootstrap-icons.json 与 docs/layouts/icons/single.html 这三个文件中找到完整的实现范本。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 水滴半填充图标Droplet half源码与使用全解析Bootstrap Icons 水滴半填充图标Droplet half源码与使用全解析 Bootstrap Icons bi 是 Bootstrap 官前端Bootstrap Icons 图标实战chat-square-text-fill 方角聊天文字填充图标的使用、字体码点与源码解析Bootstrap Icons 图标实战chat square text fill 方角聊天文字填充图标的使用、字体码点与源码解析 本篇指南聚焦 Bootst前端Swoole 6.0 版本深度解析多线程支持、io_uring 文件异步引擎与生态演进Swoole 6.0 版本深度解析多线程支持、io_uring 文件异步引擎与生态演进 导读 本文以仓库内的 CHANGELOG.md https://lin前端上一篇电子书转有声书完整指南ebook2audiobook 实现语音克隆与 1158 语言有声书生成下一篇解密yowsup中的协议分片机制大数据传输处理终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考