前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载本指南围绕 Bootstrap Icons 开源图标库中的currency-yen货币日元/¥图标展开讲解它的 SVG 源码结构、字体与精灵图sprite两种分发形态、CSS 类名与 Unicode 码位映射以及它在 Hugo 文档站中页面的生成机制。读完本文你将掌握在 HTML、CSS、SVG 精灵图和 TypeScript 环境中正确引入并使用该图标的完整方法也能理解图标文档页背后的构建管线。图标定位Commerce 分类下的货币符号currency-yen属于 Bootstrap Icons 官方图标库项目自述为 Official open source SVG icon library for Bootstrap当前版本 1.13.1见 package.json中 Commerce商业分类下的货币类图标。其文档页面的 front matter 元数据定义如下见 docs/content/icons/currency-yen.md--- title: Currency yen categories: - Commerce tags: - money - finance ---title页面标题同时也是图标的展示名称Currency yencategories: Commerce商业分类与currency-dollar、currency-euro、currency-bitcoin、currency-pound、currency-rupee、currency-yen等同属一族可对比 docs/content/icons/currency-dollar.md 与 docs/content/icons/currency-euro.md 的 front matter 结构tags: money / finance供站点内搜索与检索使用的语义标签覆盖“货币”与“金融”两大使用场景。由于文档站基于 Hugo配置文件为 hugo.yml这些 front matter 字段同时承担着页面元信息与分类归档的角色——从站点模板结构docs/layouts/可以推断分类和标签会被 Hugo 的 taxonomy 机制用于图标列表的归类与过滤。SVG 源码16×16 网格上的单路径字形图标的原始矢量文件位于 icons/currency-yen.svg完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-currency-yen viewBox0 0 16 16 path dM8.75 14v-2.629h2.446v-.967H8.75v-1.31h2.445v-.967H9.128L12.5 2h-1.699L8.047 7.327h-.086L5.207 2H3.5l3.363 6.127H4.778v.968H7.25v1.31H4.78v.966h2.47V14h1.502z/ /svg关键细节统一网格与视口viewBox0 0 16 16所有 Bootstrap Icons 图标都在 16×16 的设计网格上绘制README 的 “Adding SVGs” 一节明确说明新字形先在 Figma 中以 16×16px 网格设计单路径结构整个 ¥ 符号由一个path完成没有任何分组、描边或填充色冗余属性属于纯fill字形无 stroke符合项目对新 SVG 的规范要求继承当前色fillcurrentColor意味着图标的颜色永远跟随 CSScolor属性这为后面“一行代码换主题色”的着色方式奠定了基础类名预置classbi bi-currency-yen与字体图标的类名保持一致便于 CSS 统一控制。从路径坐标可以解读出典型的“円”字形中间横线贯穿上下竖笔底部呈圆形收尾顶部竖线延伸是日式货币符号的通用视觉表达。字体图标.bi-currency-yen与码位\f63a除了独立 SVG 文件Bootstrap Icons 还通过npm run icons构建流程见 package.json 中的icons脚本icons-main优化 SVG再并行生成精灵图与字体将每个图标编译进图标字体。currency-yen在字体体系中的映射证据分布在四个文件中文件对应内容font/bootstrap-icons.scss第 1373 行currency-yen: \f63a,SCSS Mapfont/bootstrap-icons.css第 1366 行.bi-currency-yen::before { content: \f63a; }font/bootstrap-icons.json第 1339 行currency-yen: 63034,十进制 Unicode 码位font/bootstrap-icons.ts第 689 行| currency-yenTypeScript 联合类型font/bootstrap-icons.min.css压缩后的同名规则含字体声明与.bi::before基类也就是说currency-yen被分配了私有区码位UF63A十进制 63034。使用方式如下!-- 先引入图标字体样式 -- link relstylesheet hreffont/bootstrap-icons.css !-- 再通过类名输出 ¥ 字形 -- i classbi bi-currency-yen/i字体文件本体位于 font/fonts/bootstrap-icons.woff2 与 font/fonts/bootstrap-icons.woffCSS 中的font-face会在需要时按需加载。图标默认以display:inline-block渲染并做-webkit-font-smoothing等抗锯齿处理垂直对齐为vertical-align:-.125em保证与正文文本基线协调这些规则都能在 font/bootstrap-icons.css 顶部的.bi::before基类中看到。尺寸与颜色由于字形继承currentColor且是字体字形可直接用 CSS 控制i classbi bi-currency-yen stylefont-size: 2rem; color: #dc3545;/i这与官方文档站示例见 docs/content/_index.md 第 110117 行以i classbi bi-alarm/i演示同一机制的做法完全一致。SVG 精灵图单文件按需引用项目根目录的 bootstrap-icons.svg 是一个聚合了全部图标的 SVG 精灵图spritecurrency-yen在其中以symbol idcurrency-yen的形式存在供use引用避免重复内联整段路径。典型用法svg classbi width32 height32 fillcurrentColor use xlink:hrefbootstrap-icons.svg#currency-yen/ /svg精灵图的生成由 svg-sprite.json 配置驱动npm run icons中的icons-sprite脚本调用svg-sprite --config svg-sprite.json。同样地fillcurrentColor让它可以无缝接入 Bootstrap 的文本工具类做着色svg classbi bi-currency-yen text-success width32 height32 fillcurrentColor viewBox0 0 16 16 use xlink:hrefbootstrap-icons.svg#currency-yen/ /svg官方文档站对svg直引图标使用text-*工具类着色的示例见 docs/content/_index.md 第 175181 行。直接内嵌与img引用如果你不需要字体或精灵图最朴素的方式是直接内嵌 SVGsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-currency-yen viewBox0 0 16 16 path dM8.75 14v-2.629h2.446v-.967H8.75v-1.31h2.445v-.967H9.128L12.5 2h-1.699L8.047 7.327h-.086L5.207 2H3.5l3.363 6.127H4.778v.968H7.25v1.31H4.78v.966h2.47V14h1.502z/ /svg或者通过img标签引用独立文件img srcicons/currency-yen.svg alt日元货币符号 width16 height16README 的 “Usage” 一节归纳的四种用法复制粘贴内嵌 SVG、img引用、SVG 精灵图、CSS 字体图标即涵盖以上所有方式可按项目渲染方案SSR、静态站点、SPA自由选择。在需要无障碍标注的场合建议参照文档站实践为装饰性图标添加aria-hiddentrue见 docs/assets/js/application.js 第 7 行的i classbi bi-clipboard aria-hiddentrue/i。文档页如何生成模板 front mattercurrency-yen的文档页docs/content/icons/currency-yen.md之所以只有 front matter是因为图标页面由 Hugo 模板动态渲染具体逻辑在 docs/layouts/icons/single.html模板会根据文件名TranslationBaseName拼接出对应的字体图标片段例如i classbi bi-currency-yen/i并在页面中同时展示 SVG 路径、字体片段、精灵图片段等列表页的同类渲染逻辑见 docs/layouts/partials/icons.html 第 17 行i classbi bi-{{ $filename }}/i。本地预览文档站的方式npm i npm start # 等价于 docs-serve启动 Hugo 服务端口 4000构建与发布管线从 SVG 到字体的一站式产出如果你需要为currency-yen这样的图标重新生成产物项目提供了两条关键脚本见 package.jsonnpm run icons依次执行icons-main用 SVGO 优化 icons 目录中的 SVG并重写属性顺序、icons-sprite生成 bootstrap-icons.svg 精灵图与icons-font通过 fantasticon 生成字体、cleancss压缩生成 min.cssnpm run pages为每个图标生成带模板内容的永久链接 Markdown 页面即 docs/content/icons 下各文件。SVG 的优化规则集中在 svgo.config.mjs。值得注意的是README 提示在提交图标改动时应当排除自动生成的font/**与bootstrap-icons.svg等产物它们通常在发布前统一生成——这也解释了为什么currency-yen的字体、精灵图与 SVG 源文件在仓库中是并存状态。小结currency-yen是 Bootstrap Icons 商业分类下的一个标准货币图标源文件 icons/currency-yen.svg 以 16×16 网格、单路径、fillcurrentColor定义字形它同时以字体图标类名bi bi-currency-yen、码位 UF63A和精灵图符号bootstrap-icons.svg#currency-yen两种形态分发满足从静态页面到组件化前端的各类集成场景其文档页则由 front matter 元数据与 Hugo 模板协作生成可纳入money、finance等标签的检索体系。无论选择哪种接入方式currentColor继承机制都让你只需一个 CSScolor即可完成主题化着色。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 的 border-center 图标全解析SVG 结构、字体码位与文档页生成机制Bootstrap Icons 的 border center 图标全解析SVG 结构、字体码位与文档页生成机制 border center边框居中是 B前端Bootstrap Icons 的 cloud-sun-fill 图标完全解析SVG 源码、字体码点与文档生成机制Bootstrap Icons 的 cloud sun fill 图标完全解析SVG 源码、字体码点与文档生成机制 这篇技术指南围绕 Bootstrap Ic前端Bootstrap Icons 的 cake-fill 图标完全指南SVG 源码、字体码点与集成实践Bootstrap Icons 的 cake fill 图标完全指南SVG 源码、字体码点与集成实践 导读 cake fill 是 Bootstrap Ico前端上一篇告别Google Calendar5大隐私优先的日历替代方案终极指南下一篇broot 暂存区Staging Area实战指南一次对多个文件批量执行命令创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考