前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载导读本文以 Bootstrap 官方开源图标库当前仓库gh_mirrors/ic/icons中braces-asterisk图标的官方文档 docs/content/icons/braces-asterisk.md 为核心深入解析该图标的命名语义、分类标签、SVG 路径实现并完整演示它在嵌入式内联、图标字体、SVG 精灵图、Sass 与 CSS 等多种形态下的接入方式。读完本文你将能准确理解这个花括号加星号图标的定位并掌握在真实项目中直接引用它的全部可行方案。一、官方文档定义了怎样的一个图标braces-asterisk的文档页以 YAML frontmatter 形式记录了它的全部元信息见 docs/content/icons/braces-asterisk.md--- title: Braces asterisk categories: - Typography tags: - text - type - code - developer - development - software added: 1.10.0 ---这些字段的含义与用途如下title图标显示名称Braces asterisk即花括号 星号。braces指成对的花括号{ }asterisk指星号*组合起来正是代码语境中代码块/代码片段 通配符的视觉表达。categoriesTypography排版在图标库中归入排版类目与代码、文本相关的图标并列。tagstext、type、code、developer、development、software六个标签全部指向文本、代码、开发者语境。在图标库的检索与分类体系中这些标签用于让开发者按关键词快速定位该图标。added: 1.10.0表明该图标自 Bootstrap Icons 1.10.0 版本起加入。当前仓库 package.json 中记录的库版本为1.13.1说明它已是稳定发布的既有图标。可以推断braces-asterisk的设计意图是服务开发者场景——例如标记代码片段、含通配符的代码块或编程相关提示与同族的braces纯花括号图标形成互补关系。二、源码视角SVG 路径如何画出花括号 星号2.1 独立 SVG 文件图标源文件位于 icons/braces-asterisk.svg完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-braces-asterisk viewBox0 0 16 16 path fill-ruleevenodd dM1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6M14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6M7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5z/ /svg关键设计要点16×16 视图盒viewBox0 0 16 16与库内所有图标保持统一的网格规范方便在字体与精灵图中对齐。fillcurrentColor颜色继承当前文本颜色因此可以用 CSScolor随意换色图标字体与内联用法下均生效。fill-ruleevenodd路径采用偶奇填充规则保证内部镂空区域花括号与星号之间的负空间正确透明。路径结构从源码结构看d值可分为三大部分——左花括号的折线轮廓M1.114 ...段、右花括号的镜像轮廓M14.886 ...段、以及中间星号的M7.5 ... z段由四段对角斜线收拢于中心构成*形。2.2 与基础版 braces 的对比库中还提供了不带星号的姊妹图标 icons/braces.svg其路径仅包含左右花括号两段且没有fill-ruleevenodd。两者对比可以直观看出braces纯花括号适合表达代码块/代码片段本身braces-asterisk在花括号中央叠加星号语义更偏向代码中的通配符、匹配任意内容的代码段或待填充的代码占位。这种基础形 修饰形的成对设计在 Bootstrap Icons 中十分常见如check与check-all、cloud与cloud-plusbraces与braces-asterisk是同一思路下的排版类目变体。三、一个图标在仓库中的多重身份braces-asterisk不只是icons/目录下的一个 SVG 文件它在构建产物中同时存在多个可引用形态。通过全文搜索braces-asterisk可以确认其全部注册位置产物文件具体形态内容示例icons/braces-asterisk.svg独立 SVG 源文件classbi bi-braces-asteriskbootstrap-icons.svgSVG 精灵图中的 symbolsymbol idbraces-asterisk viewBox0 0 16 16font/bootstrap-icons.css图标字体类.bi-braces-asterisk::before { content: \f70e; }font/bootstrap-icons.scssSass 变量映射braces-asterisk: \f70efont/bootstrap-icons.json图标名到码点映射braces-asterisk: 63246font/bootstrap-icons.tsTypeScript 字面量类型\| braces-asterisk这些映射之间相互印证JSON 中的63246正是十六进制码点0xF70E的十进制值而 CSS/SCSS 中的\f70e即该码点的转义写法。TypeScript 类型文件font/bootstrap-icons.ts则把braces-asterisk收录进联合类型供使用图标名作参数的类型安全场景如图标组件、查询工具引用。从仓库的构建脚本见 package.json 的icons-font-main、icons-sprite等命令看这些形态均由构建流程从icons/*.svg统一生成开发者直接消费产物即可无需手工维护映射。四、安装与五种使用方式官方使用文档位于 docs/content/_index.md其中给出了安装入口与全部用法。以下以braces-asterisk为例逐一落地。4.1 安装# 方式一npm包含 SVGs、精灵图与图标字体 npm i bootstrap-icons # 方式二ComposerPHP 项目 composer require twbs/bootstrap-icons也可以直接引用 CDN 上的压缩样式表link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap-icons1.13.1/font/bootstrap-icons.min.css或在 CSS 中通过import引入import url(https://cdn.jsdelivr.net/npm/bootstrap-icons1.13.1/font/bootstrap-icons.min.css);4.2 方式一内联嵌入式直接把 SVG 源文件内容嵌入 HTML。官方建议设置width: 1em可选height: 1em以便通过font-size缩放svg xmlnshttp://www.w3.org/2000/svg width1em height1em fillcurrentColor classbi bi-braces-asterisk viewBox0 0 16 16 path fill-ruleevenodd dM1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6M14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6M7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5z/ /svg4.3 方式二SVG 精灵图推荐用于多处复用精灵图允许通过use引用任意图标片段标识符即文件名。官方文档强调使用外部文件形式的精灵图时需注意 Chrome 存在use跨域不生效 的已知问题因此精灵图更适合部署在同一域名下svg classbi width32 height32 fillcurrentColor use xlink:hrefbootstrap-icons.svg#braces-asterisk/ /svg对应精灵图文件 bootstrap-icons.svg 中braces-asterisk以symbol idbraces-asterisk classbi bi-braces-asterisk viewBox0 0 16 16的形式存在id与文件名一致use的#片段名即可直接命中。4.4 方式三外部图片引用将仓库icons/目录下的 SVG 拷贝到自己的静态资源目录像普通图片一样使用imgimg src/assets/icons/braces-asterisk.svg altBraces asterisk width32 height32注意img方式无法利用currentColor换色换色需在 SVG 文件内指定fill。4.5 方式四图标字体引入字体样式表后用bi 图标名组成 classi classbi bi-braces-asterisk/i图标的颜色与大小完全跟随文字样式i classbi bi-braces-asterisk stylefont-size: 2rem; color: cornflowerblue;/i其背后的实现见 font/bootstrap-icons.css 中的规则.bi-braces-asterisk::before { content: \f70e; }——即把0xF70E码点渲染为对应字形。若想用 Sass 变量方式引用可借助 font/bootstrap-icons.scss 中braces-asterisk: \f70e的映射。4.6 方式五CSS 背景图含 Sass 项目适配可以把 SVG 作为 CSS 背景图官方提醒必须转义特殊字符例如十六进制颜色中的#要写成%23.bi-braces-asterisk-bg { display: inline-block; width: 1rem; height: 1rem; background-image: url(data:image/svgxml,svg viewBox0 0 16 16 fill%23333 xmlnshttp://www.w3.org/2000/svgpath fill-ruleevenodd dM1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6M14.886 7.9v.164-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6M7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5z//svg); background-repeat: no-repeat; background-size: 1rem 1rem; }若在 Bootstrap 的 Sass 项目中以 npm 方式安装还需把字体目录变量指向node_modules内的实际位置官方说明该设置对 Vite、Parcel 等构建器是必需的// 更新导入目录指向 node_modules 中的实际位置 $bootstrap-icons-font-dir: bootstrap-icons/font/fonts; // 照常导入 Sass 文件 import bootstrap-icons/font/bootstrap-icons;五、适用场景小结综合官方分类标签Typographytext/type/code/developer/software与路径语义braces-asterisk适合以下使用场景代码编辑器、IDE 插件或文档站点中表示代码片段 / 代码块标记含通配符的代码或正则/匹配类功能入口开发者工具、CLI 帮助面板中的装饰性图标作为braces图标的强调变体在同一界面中区分普通代码与带星号的通配代码两种状态。其字体码点\f70e、精灵图id、TypeScript 类型名统一为braces-asterisk无论在哪种形态下引用命名都保持一致便于记忆与迁移。六、延伸阅读官方安装与使用总览docs/content/_index.md该图标文档与元数据docs/content/icons/braces-asterisk.md源 SVG 与姊妹图标icons/braces-asterisk.svg、icons/braces.svg字体 CSS / Sass / JSON / TS 映射font/bootstrap-icons.css、font/bootstrap-icons.scss、font/bootstrap-icons.json、font/bootstrap-icons.ts精灵图文件bootstrap-icons.svg包信息与构建脚本package.json赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 的 camera-video-fill 图标源码结构、字体映射与使用指南Bootstrap Icons 的 camera video fill 图标源码结构、字体映射与使用指南 本篇技术指南以 Bootstrap Icons 官方前端Flapigen终极Rust跨语言绑定工具完全指南Flapigen终极Rust跨语言绑定工具完全指南 Flapigen是一款强大的Rust跨语言绑定工具能够轻松连接Rust编写的程序或库与其他编程语言。它作前端Bootstrap Icons bag-x 图标深度解析SVG 结构、字体编码与多形态集成指南Bootstrap Icons bag x 图标深度解析SVG 结构、字体编码与多形态集成指南 本篇技术指南以 Bootstrap Icons 开源图标库仓前端上一篇rainfrog源码解析核心组件scroll_table.rs实现原理下一篇终极指南5个步骤掌握MoCo v3自监督学习与对比学习技术创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考