前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载file-minus-fill是 Bootstrap Icons 官方开源图标库当前仓库版本 v1.13.1中归属于 Files and folders文件与文件夹分类的实心填充式图标语义上代表删除文件 / 从文档中移除内容常用于文件管理器、上传组件、批量操作工具栏等场景。本文以 docs/content/icons/file-minus-fill.md 中对该图标的元数据定义标题、分类、标签为骨架结合仓库内真实的 SVG 源码、字体映射表、TypeScript 类型声明与构建脚本完整讲解该图标的路径结构与坐标细节、三种前端集成方式内联 SVG、字体类、精灵图以及它在整条构建管线中的生成原理帮助你既会用也会查。图标定位文档元数据揭示的语义与分类在 Bootstrap Icons 的文档系统中每个图标对应一个 Hugo 内容页docs/content/icons/file-minus-fill.md 通过 front matter 定义了该图标的全部检索信息--- title: File minus fill categories: - Files and folders tags: - doc - document - delete - remove ---从这些元数据可以准确解读出图标的语义定位titleFile minus fill即文件减号实心填充。fill后缀表明它是实心版本与之相对的是轮廓版本file-minuscategoriesFiles and folders对应图标库官网导航中的文件与文件夹分类说明该图标与file-earmark、folder等一组图标同属文件系统隐喻tagsdoc、document、delete、remove四个标签指向它的实际用途——删除文件、移除文档、清理内容。这意味着在为删除按钮、清空列表、取消附加文件等交互设计图标语义时它是最贴切的候选。值得说明的是delete/remove标签决定了该图标最典型的应用场景是负面/破坏性操作。在 UI 中它常与危险色如红色搭配用于删除确认、移除附件、清空回收站等入口。SVG 源码解剖16×16 网格上的两段路径该图标的原始矢量源码位于 icons/file-minus-fill.svg全文仅一条path含两个子路径是典型的 Bootstrap Icons 手写优化风格svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-minus-fill viewBox0 0 16 16 path dM12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M6 7.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1 0-1/ /svg外层属性解读属性值含义width/height16/16基础栅格尺寸Bootstrap Icons 全库统一采用 16×16 设计网格viewBox0 0 16 16逻辑坐标空间缩放时按此比例伸缩fillcurrentColor关键设计图标颜色跟随文本color属性无需单独控制classbi bi-file-minus-fill官方约定的类名也是字体图标方式下选择器的来源两个子路径的几何语义第一段M12 0H4...文件主体起点在右上角(12, 0)向左画水平线到(4, 0)再以半径 2 的圆角过渡到(2, 2)垂直向下 12 单位到(2, 14)圆角到(4, 16)向右 8 单位到(12, 16)圆角到(14, 14)垂直向上 12 单位到(14, 2)最后圆角回到(12, 0)。整体勾勒出一个4px 圆角的竖版文件矩形。因为是fill版本轮廓内部全部填充无需fill-rule技巧第二段M6 7.5h4...减号从(6, 7.5)向右画 4 单位到(10, 7.5)这段线条通过 .5.5 0 0 1 0 1 先向下偏移半单位再水平回程实际渲染为一条从 x6 到 x10、y 方向厚度 1 单位7.5→8.5的水平减号垂直居中于文件主体文件高 16减号中心在 y8。几何要点减号宽度 4 单位、居中于 16 宽的文件视觉上左右各留 6 单位边距减号上边缘 y7.5 恰好压在文件高度中线y8之上半单位保证视觉均衡。与轮廓版本 file-minus 的对比轮廓版源码 icons/file-minus.svg 的路径策略完全不同文件主体改为两段闭合描边路径内外两层矩形各留 1 单位厚度形成 1px 的边框效果减号则单独用一条水平路径绘制。因此file-minus-fill单路径、实心填充、小体积在 12px 等小字号下辨识度更高file-minus空心描边、更适合大尺寸与线性图标风格。两者共用file-minus*语义视觉上互为实心/空心变体这是 Bootstrap Icons 的-fill后缀命名惯例。三种前端集成方式Bootstrap Icons 提供了三条等价的集成路径file-minus-fill在每条路径下都有对应产物。方式一内联 SVG最灵活直接把 icons/file-minus-fill.svg 复制进模板或组件通过currentColor继承文字颜色用width/height控制尺寸。适合需要微调路径、做 CSS 动画描边、变色或离线环境的场景svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-minus-fill viewBox0 0 16 16 path dM12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M6 7.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1 0-1/ /svg方式二字体图标class 方式最轻量引入 font/bootstrap-icons.css或压缩版 font/bootstrap-icons.min.css后任何元素加上bi bi-file-minus-fill类即可渲染图标通过::before伪元素注入字体字形i classbi bi-file-minus-fill/i样式表第 702 行给出了该图标对应的字形码点映射.bi-file-minus-fill::before { content: \f3a2; }该字形由font-face声明的bootstrap-icons字体提供见 font/bootstrap-icons.css字体文件位于 font/fonts/bootstrap-icons.woff2 与 font/fonts/bootstrap-icons.woff浏览器按 woff2 → woff 顺序回退加载。方式三SVG 精灵图symbol use多图标复用最优仓库根目录的 bootstrap-icons.svg 是合并全部图标后的精灵图文件其中包含symbol classbi bi-file-minus-fill viewBox0 0 16 16 idfile-minus-fill path dM12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M6 7.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1 0-1/ /symbol页面引用一次精灵图后续所有图标通过use按id复用浏览器只下载一份 SVGsvg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#file-minus-fill/use /svg这是需要在一页内展示几十上百个图标如文档站、图标选择器时的标准做法。图标注册表一个图标在仓库中的五种形态file-minus-fill并非只存在于icons/目录构建产物会在四个注册文件中同步登记。了解这些位置可以帮你快速排查图标不显示、类型报错、字体乱码等问题文件位置内容CSSfont/bootstrap-icons.css.bi-file-minus-fill::before { content: \f3a2; }SCSSfont/bootstrap-icons.scss变量映射file-minus-fill: \f3a2JSONfont/bootstrap-icons.json码点数字file-minus-fill: 62370TypeScriptfont/bootstrap-icons.ts字符串字面量联合类型成员file-minus-fill精灵图bootstrap-icons.svgsymbol idfile-minus-fill其中三个细节值得注意码点一致性\f3a2十六进制与62370十进制是同一码点两种写法0xF3A2 62370。该码点位于字体私有使用区Private Use Area避免与正常 Unicode 字符冲突TypeScript 自动补全bootstrap-icons.ts导出的联合类型包含file-minus-fill在 TS 项目如 React/Vue TS中动态拼类名时能获得 IDE 类型提示杜绝手写错类名CSS 与 SCSS 双份维护bootstrap-icons.css是编译产物bootstrap-icons.scss是源码形态提供$bootstrap-icons-map供 Sass 项目二次开发两者由构建脚本同步生成。构建管线从 icons/*.svg 到全部产物的自动化流程仓库的 package.json 把这一整套生成流程脚本化核心命令链为npm run icons该命令内部通过npm-run-all依次执行三条子任务icons-main运行 build-svgs.mjsnode build/build-svgs.mjs对icons/目录下的原始 SVG 做校验与优化配合 svgo.config.mjs 的压缩规则icons-sprite调用svg-sprite --config svg-sprite.json --loginfo icons/*.svg把全部图标合并为根目录的 bootstrap-icons.svg 精灵图icons-font先由fantasticon依据全部 SVG 生成字体文件与 font/bootstrap-icons.css、font/bootstrap-icons.ts 等映射再通过cleancss产出压缩版 font/bootstrap-icons.min.css。也就是说icons/file-minus-fill.svg 是唯一的人工维护源CSS 类名、SCSS 映射、TS 类型、JSON 码点、精灵图符号全部由构建脚本从 SVG 文件名与内容推导生成——文件名file-minus-fill直接决定了.bi-file-minus-fill类名与#file-minus-fill符号 id。若你在使用中发现某处产物缺失应回到icons/目录核对 SVG 文件本身而非手工修改生成文件。在本地查看文档站可运行npm run docs-serveHugo 开发服务器端口 4000完整打包发布则用npm run release会执行图标重建、文档构建与 zip 打包。语义化与可访问性使用建议基于本文开头梳理的元数据category: Files and folderstags: delete/remove实战中应把该图标当作语义图标而非纯装饰使用按钮场景删除文件按钮建议同时提供文本或aria-label因为图标本身不携带任何可读文本button typebutton classbtn btn-danger aria-label删除文件 i classbi bi-file-minus-fill/i /button配色联动利用currentColor特性图标颜色自动跟随按钮或文字颜色无需单独设置color属性即可实现危险色/禁用态的统一尺寸控制字体方式下通过font-size缩放图标伪元素继承字号内联 SVG 方式下直接调整width/height精灵图方式两者皆可注意 16×16 网格在奇数尺寸如 15px下减号的 1 单位厚度可能产生轻微模糊建议使用偶数像素尺寸。小结围绕 docs/content/icons/file-minus-fill.md 定义的标题、分类与标签本文完整还原了该图标从单一 SVG 源文件到 CSS/SCSS/TS/JSON/精灵图五种产物的全貌它的 16×16 网格上两段路径的几何构成、currentColor取色机制、\f3a2码点在字体私有区的映射以及由npm run icons驱动的自动构建链路。对开发者而言无论是直接内联 SVG、挂载bi bi-file-minus-fill字体类还是通过bootstrap-icons.svg#file-minus-fill复用精灵图都能在删除文件/移除文档这类破坏性操作场景中快速落地且所有产物均可在本仓库对应路径下逐一核验。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 的 Capslock fill 图标SVG 结构、字体与 Codepoint 使用指南Bootstrap Icons 的 Capslock fill 图标SVG 结构、字体与 Codepoint 使用指南 本文聚焦 Bootstrap Icon前端Bootstrap Icons 图标详解file-earmark-minus-fill 的 SVG 结构、字体映射与四种使用方式Bootstrap Icons 图标详解file earmark minus fill 的 SVG 结构、字体映射与四种使用方式 Bootstrap Icon前端Bootstrap Icons 的 Calendar Date Fill 图标SVG 结构、字体 Codepoint 与四种引入方式全解析Bootstrap Icons 的 Calendar Date Fill 图标SVG 结构、字体 Codepoint 与四种引入方式全解析 Bootstrap前端上一篇Posting项目脚本功能深度解析Python脚本在API请求中的高级应用下一篇NodeGUI 样式系统深度解析从基础到高级应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考