前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载arrows-angle-expand是 Bootstrap Icons 官方开源图标库中一枚用于表达对角展开 / 全屏放大语义的箭头图标被归类在 Arrows箭头类别下核心标签为arrow与resize。本文以仓库中的图标元数据文档 docs/content/icons/arrows-angle-expand.md 为骨架结合其 SVG 源码、字体码点、文档页渲染模板与构建脚本完整拆解这枚图标的实现原理并给出可直接落地的四种集成方式内联 SVG、img、SVG Sprite、Web Font帮助你在自己的项目中准确复用与二次编辑。图标元数据标题、分类与标签仓库中每个图标都对应docs/content/icons/目录下的一份 Markdown 文件arrows-angle-expand的元数据文档全文如下--- title: Arrows angle expand categories: - Arrows tags: - arrow - resize ---title标题Arrows angle expand即箭头 · 对角展开。作为文档页的 H1 标题、浏览器标签标题以及图标检索的关键词。categories分类Arrows与 icons/arrows-angle-contract.svg对角收缩、icons/arrow-down-up.svg 等一起构成 Bootstrap Icons 的箭头图标族。tags标签arrow与resize。resize明确点出这枚图标的典型应用场景——窗口/面板的全屏放大、画布缩放、媒体播放器的最大化按钮。这份 front matter 本身并不直接渲染页面内容而是由 Hugo 模板消费。在 docs/layouts/icons/single.html 中.Params.tags与.Params.categories会被渲染成页面的 Tags / Category 元信息列表供访问者快速了解图标语义并跳转到相关分类。图标语义展开与收缩的对角表达与语义相对的 icons/arrows-angle-contract.svg 不同arrows-angle-expand描绘的是从中心向四个对角方向外扩的动作左上箭头向左上角伸展右下箭头向右下角伸展整体视觉语言对应放大、扩展、全屏。这一对图标常用于 UI 中的视图切换按钮——点击expand进入全屏点击contract退出全屏是媒体播放器、编辑器、仪表盘组件中非常高频的交互控件。两个文件同属Arrows分类、共享arrow/resize标签正好形成同一动作的正反两个方向在设计稿中通常成对使用。SVG 源码逐段拆解16×16 网格上的偶数奇偶路径图标本体存放在 icons/arrows-angle-expand.svg内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-arrows-angle-expand viewBox0 0 16 16 path fill-ruleevenodd dM5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707/ /svg画布规格width16 height16viewBox0 0 16 16。Bootstrap Icons 的所有图标都基于 16×16 的网格设计见 README.md 中New glyphs are designed in Figma first on a 16x16px grid的说明便于在 1x、2x 乃至任意 DPR 下保持锐利。着色方式fillcurrentColor意味着图标颜色继承所在元素的color只需修改文字颜色即可完成图标换色。单一 path fill-ruleevenodd整个图形由一段路径的**两个子路径subpath**构成。evenodd填充规则用于处理子路径重叠区域的镂空保证箭头杆与箭头头的视觉连续、无异常重叠填充。结合.5单位的位移量如5.828、10.172、a.5.5可以看出路径严格贴合 16 网格的半像素对齐这是图标在小尺寸下保持清晰的关键设计。路径语义两段子路径分别绘制左上箭头从5.828 10.172出发向1.732方向延伸与右下箭头从10.172 5.828出发向14.268方向延伸其中4.096是箭头杆长度0.707是箭头转折处的直角控制量两个子路径以m命令分隔共同拼出向左上、右下对角展开的图形。这一规范化的 path 结构与类名bi bi-arrows-angle-expand完全一致可直接作为内联 HTML 使用见下文。文档页如何渲染这枚图标每个图标文档页由 docs/layouts/icons/single.html 渲染其核心逻辑第 36-38 行为{{- $localSvgPath : printf /icons/%s.svg .File.TranslationBaseName -}} {{- $svgPath : path.Join /assets/ $localSvgPath -}} {{- $svgHtml : readFile $localSvgPath | chomp | safeHTML -}}即根据文档文件名TranslationBaseName即arrows-angle-expand动态拼出/icons/arrows-angle-expand.svg用readFile读取原始 SVG 并以safeHTML注入页面。随后该模板会自动生成大尺寸预览以font-size: 10em的 demo 容器展示图标Examples 区域把同一个 SVG 分别嵌入 Heading、内联文本、链接、按钮btn-primary/btn-success/btn-outline-danger和输入框前缀等真实组件场景docs/layouts/icons/single.htmlDownload 面板提供Download SVG按钮指向/assets/icons/arrows-angle-expand.svgIcon font 代码片段i classbi bi-arrows-angle-expand/iCode point 面板从font/bootstrap-icons.json读取码点并展示 Unicode / CSS / JS / HTML 四种写法Copy HTML 面板直接给出可复制的内联 SVG。理解这个渲染链后你就能明白想新增或查看任意图标如arrows-angle-contract只需关注icons/*.svg与docs/content/icons/*.md两个目录的对应关系。四种集成方式与可运行示例仓库 README 明确给出了四种官方用法见 README.md以下针对本图标逐一展开。1. 内联 SVGCopy HTML将 icons/arrows-angle-expand.svg 的svg直接粘贴进 HTML借助currentColor天然继承文字颜色button typebutton classbtn btn-outline-secondary svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-arrows-angle-expand viewBox0 0 16 16 path fill-ruleevenodd dM5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707/ /svg Fullscreen /button内联方式优势是零依赖、可被 CSS 直接控制尺寸、颜色、旋转也是文档页 Copy HTML 面板提供的默认用法。2.img引用img src/assets/icons/arrows-angle-expand.svg altExpand width16 height16适合图标作为独立资源、不参与 DOM 样式继承的场景注意此时换色需直接修改 SVG 文件中的fill或使用 CSSfilter。3. SVG Sprite仓库根目录的 bootstrap-icons.svg 是全部图标合并成的 sprite 文件其中包含symbol idarrows-angle-expand ...由npm run icons-sprite依据 svg-sprite.json 配置生成。使用方式svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#arrows-angle-expand/use /svgSprite 适合页面中同时出现大量图标的场景一次请求、多处use复用。4. Web FontCSS class先引入字体样式文件再使用类名link relstylesheet hreffont/bootstrap-icons.css i classbi bi-arrows-angle-expand/i字体文件位于 font/fonts/含 woff2 / woff 两种格式样式表 font/bootstrap-icons.css 中对应规则为.bi-arrows-angle-expand::before { content: \f14a; }同时项目提供 font/bootstrap-icons.scssSass与 font/bootstrap-icons.min.css压缩版两种样式入口可按构建链路选用。字体码点UF14A 的四种写法在 font/bootstrap-icons.json 中本图标的码点映射为arrows-angle-expand: 6177061770的十六进制即0xF14A位于 Unicode 私有使用区Private Use Area用于规避与常规文字字符的冲突。官方文档页据此生成四种等价写法对应 docs/layouts/icons/single.html 的 Code point 面板场景写法示例UnicodeUF14A字体排印/文档标注CSS\f14acontent: \f14aJS\uF14A字符串中的转义表示HTML#xF14A;实体引用#xF14A;注意码点映射同时被 font/bootstrap-icons.ts 中的联合类型使用| arrows-angle-expand因此 TypeScript 项目中通过bootstrap-icons包引用字体时可以享受完整的图标名类型提示。相关图标与配套操作与arrows-angle-expand成对出现的是 arrows-angle-contract.svg对角收缩其元数据文档 docs/content/icons/arrows-angle-contract.md 同样带有arrow/resize标签。在设计全屏切换交互时推荐组合使用进入全屏显示expand退出全屏切换为contract。仓库内还包含大量同类箭头图标如arrows-fullscreen、arrows-expand、arrows-angle-contract等可通过 docs/content/icons/ 目录按分类浏览。安装与本地预览作为开发者你可以通过 npm 直接安装图标包README 说明见 README.mdnpm i bootstrap-icons # 或使用 Composer composer require twbs/bootstrap-icons若要在本地搭建文档站并实时预览这枚图标的渲染效果可克隆仓库后执行git clone https://github.com/twbs/icons/ cd icons npm i npm start随后访问http://localhost:4000package.json 中start实际是docs-serve的别名等价于hugo server --port 4000。图标相关的主要 npm scripts 包括npm run icons用 SVGO 优化icons/目录下的 SVG并重新生成字体与 sprite对应脚本链icons-main→icons-sprite/icons-font见 package.jsonnpm run pages为每个图标生成docs/content/icons/*.md模板页即本文骨架文件arrows-angle-expand.md的来源。小结arrows-angle-expand虽是一枚体量极小的图标但其背后串联起 Bootstrap Icons 仓库的完整工程链路16×16 网格上的 SVG 路径设计icons/arrows-angle-expand.svg、front matter 元数据docs/content/icons/arrows-angle-expand.md、Hugo 文档页动态渲染docs/layouts/icons/single.html、字体码点 UF14A 的四格式映射font/bootstrap-icons.json、font/bootstrap-icons.css以及 sprite 与 TypeScript 类型bootstrap-icons.svg、font/bootstrap-icons.ts。无论你选择内联 SVG、img、Sprite 还是 Web Font 方式集成理解这条链路都能让你在使用任意一枚 Bootstrap Icons 图标时做到知其然更知其所以然。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐SiYuan 阿拉伯语编辑指南从 RTL 设置到排版细节完整教程SiYuan 阿拉伯语编辑指南从 RTL 设置到排版细节完整教程 打开一篇阿拉伯语笔记屏幕上文字顺序颠倒、光标跳到左边、列表符号贴在行首而不是行尾——这就是前端Bootstrap Icons bag-x 图标深度解析SVG 结构、字体编码与多形态集成指南Bootstrap Icons bag x 图标深度解析SVG 结构、字体编码与多形态集成指南 本篇技术指南以 Bootstrap Icons 开源图标库仓前端Bootstrap Icons 的 Arrow Clockwise 图标全解析SVG 结构、字体码点与四种接入方式Bootstrap Icons 的 Arrow Clockwise 图标全解析SVG 结构、字体码点与四种接入方式 Arrow Clockwise 是 Boo前端上一篇终极指南使用nunif iw3-desktop将PC桌面实时转换为3D立体视频流下一篇推荐一款强大的RecyclerView适配器BRVAH创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考