前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载导读file-plus-fill文档路径 docs/content/icons/file-plus-fill.md是 Bootstrap Icons 官方开源 SVG 图标库中Files and folders文件与文件夹分类下的一枚新建/添加文件语义图标属于file系列中带-fill后缀的实心变体。本文以该图标文档为骨架结合仓库中 icons/file-plus-fill.svg 的原始矢量源码、font/bootstrap-icons.css 与 font/bootstrap-icons.scss 的字体映射、bootstrap-icons.svg 精灵图以及 README.md 的安装说明逐层讲解如何读懂 SVG 路径数据、如何以 SVG 内联、img引用、CSS 字体和 SVG Sprite 四种方式在实际项目中渲染并使用它同时给出基于 package.json 的安装与本地文档开发命令。图标文档与语义定位在仓库的 Hugo 文档体系中每个图标对应一份模板生成的 Markdown 页面。file-plus-fill.md 的正文核心是如下 Front Matter 元数据--- title: File plus fill categories: - Files and folders tags: - doc - document - add - new ---这份元数据明确了该图标的三个关键信息titleFile plus fill即文档页与搜索索引中展示的名称categories归属Files and folders分类与file、file-fill、file-plus、file-earmark-plus-fill等同系列图标同属一个语义分组tagsdoc、document、add、new覆盖了文档/文件 新增两个核心检索维度方便开发者在图标库站点内按关键词过滤定位。从语义上讲该图标表达在文档/文件上执行新建、添加或追加操作是文件管理器、富文本编辑器工具栏、CMS 后台新建文档按钮等场景的高频图形符号。SVG 源码逐段解析仓库中每个图标都是一份经过 SVGO 优化的独立 SVG 文件。icons/file-plus-fill.svg 的完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-plus-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-2M8.5 6v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 1 0/ /svg根元素属性属性值含义xmlnshttp://www.w3.org/2000/svgSVG 命名空间声明内联嵌入 HTML 时必须保留width/height16/16默认渲染尺寸即设计基准的 16×16 网格fillcurrentColor让图标的填充色继承父元素的color属性实现随主题一键换色classbi bi-file-plus-fill与 font/bootstrap-icons.css 中的字体类名bi-file-plus-fill保持一致viewBox0 0 16 16视口坐标系路径数据基于该 16×16 网格绘制根据 README.md 中 Adding SVGs 一节所述图标先按 16×16 网格在 Figma 中设计再导出为使用fill非 stroke的扁平化 SVG随后由npm run icons脚本调用 SVGO 优化并统一重置属性顺序因此仓库中所有图标都遵循上述一致的规范。路径数据d的几何含义整个图标只有一个path由两段子路径组成M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2—— 绘制文件主体轮廓M12 0从右上角 (12, 0) 起笔H4水平左移到 (4, 0)a2 2 0 0 0-2 2逆时针方向画半径为 2 的圆弧到达左上角 (2, 2)形成左上圆角v12垂直向下 12 个单位到左下角 (2, 14)a2 2 0 0 0 2 2画左下圆角到 (4, 16)h8水平右移到 (12, 16)a2 2 0 0 0 2-2画右下圆角到 (14, 14)V2垂直向上到 (14, 2)a2 2 0 0 0-2-2画右上圆角并闭合形成带 4 个圆角、宽 14 高 16 的文档底板。M8.5 6v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 1 0—— 绘制文档中心叠加的号M8.5 6从加号水平臂右端点起笔v1.5、H10、a.5.5 0 0 1 0 1向右伸出半径 0.5 的圆头构成水平右臂依次H8.5、V10、a.5.5 0 0 1-1 0构成水平左臂接着V8.5、H6、a.5.5 0 0 1 0-1构成垂直下臂再h1.5、V6、a.5.5 0 0 1 1 0闭合上臂。可见号的横竖两笔中心对称端点均带 0.5 半径圆角视觉上与文件主体的圆角风格统一。而-fill后缀的意义在于文件主体是一个整体实心的闭合图形可直接以fill上色对比其线框变体 icons/file-plus.svg后者由两个独立path组成——一个仅描边式地勾勒文档轮廓另一个只画号因此空心版在浅色背景下更显轻盈实心版在强调色、小尺寸场景下辨识度更高。与同系列变体的对比file-plus-fill所在家族还包括file-plus线框、file-minus-fill、file-x-fill、file-earmark-plus-fill等。它们在 font/bootstrap-icons.scss 中的 Unicode 私用区映射依次排布file-minus-fill为\f3a2file-plus-fill为\f3aafile-plus为\f3ab路径结构同构、仅在中央符号处替换为减号或叉号这使同一套文件图形可以覆盖新建、删除、关闭等不同操作语义。安装与获取方式依据 README.md 的 Install 一节Bootstrap Icons 以 npm 包形式发布当前仓库 package.json 声明版本为1.13.1MIT 协议npm i bootstrap-icons也可以使用 Composer对应仓库 composer.jsoncomposer require twbs/bootstrap-icons安装后包内会包含三类可直接使用的产物icons/*.svg数千个独立优化 SVG 文件含本文的file-plus-fill.svgbootstrap-icons.svg由 svg-sprite.json 配置的 SVG Sprite 文件font/目录bootstrap-icons.css、bootstrap-icons.min.css、bootstrap-icons.scss、bootstrap-icons.json、bootstrap-icons.ts及fonts/bootstrap-icons.woff2、fonts/bootstrap-icons.woff字体文件。若需在本地搭建文档站进行查看或二次开发README.md 提供了 Hugo 开发流程hugo.yml 为站点配置git clone https://github.com/twbs/icons/ cd icons npm i npm start随后浏览器打开http://localhost:4000即可。常用脚本还包括npm run icons处理并优化icons目录下的 SVG、生成字体与精灵图和npm run pages为每个图标生成带模板 Markdown 的独立页面。四种使用方式实战1. 内联 SVG推荐可控性最高直接复制 icons/file-plus-fill.svg 的源码嵌入 HTMLbutton typebutton classbtn btn-primary svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-plus-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-2M8.5 6v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 1 0/ /svg 新建文档 /button内联方式下fillcurrentColor与classbi bi-file-plus-fill会被保留颜色自动继承外层按钮的文字色尺寸可通过 CSS 的width/height自由缩放而不失真。2. 通过img引用img srcicons/file-plus-fill.svg alt新建文档 width16 height16注意img方式无法继承父元素的color图标将按 SVG 内置的fill渲染如需改变颜色需直接编辑 SVG 文件中的fill值或用 CSSfilter做近似处理。3. 使用 SVG Sprite仓库根目录的 bootstrap-icons.svg 由 svg-sprite.json 中的svg-sprite --config svg-sprite.json icons/*.svg命令生成将全部图标打包为带symbol idfile-plus-fill的单个文件。使用方式svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#file-plus-fill/use /svgSprite 的优势是浏览器只需加载一次该 SVG 文件后续所有图标均通过use按#id引用适合图标使用密度高的页面。4. 通过 CSS 字体引入 font/bootstrap-icons.css或压缩版bootstrap-icons.min.css后用类名即可渲染i classbi bi-file-plus-fill/i其底层机制可在 font/bootstrap-icons.css 中找到对应规则.bi-file-plus-fill::before { content: \f3aa; }结合 font/bootstrap-icons.css 顶部的font-face声明可知::before伪元素将私用区码点\f3aa映射为bootstrap-icons字体中的对应字形woff2/woff 字体文件位于 font/fonts。CSS 字体方式换色最方便——直接设置color即可.bi-file-plus-fill { color: #0d6efd; /* Bootstrap primary 蓝色 */ font-size: 1.25rem; }此外 font/bootstrap-icons.ts 提供了 TypeScript 联合类型file-plus-fill | ...配合 Bootstrap 官方在 Bootstrap 5 中提供的i classbi组件可无缝集成。源码级佐证从 SVG 到字体的完整链路若要追查file-plus-fill在整套构建体系中的流转可在仓库内依次核对以下位置源文件icons/file-plus-fill.svg 为唯一的 SVG 源后续产物均由构建脚本生成字体码点映射font/bootstrap-icons.scss 中file-plus-fill: \f3aafont/bootstrap-icons.css 中.bi-file-plus-fill::before { content: \f3aa; }font/bootstrap-icons.json 中file-plus-fill: 62378即十进制 0xF3AA三者互相印证TypeScript 类型font/bootstrap-icons.ts 的图标名联合类型包含file-plus-fill保证在 TS 项目中以字符串字面量引用图标名时获得类型检查Sprite 产物bootstrap-icons.svg 内含symbol idfile-plus-fill ...由npm run icons经 svg-sprite.json 配置生成。从源码结构看icons/目录是唯一的手写源font/**与bootstrap-icons.svg均为自动生成产物——这也正是 README.md 建议开发者提交分支时排除font/**与bootstrap-icons.svg的原因避免合并冲突发布前由维护者统一再生成。结语file-plus-fill是 Bootstrap Icons 文件系列中新建/添加语义的实心代表通过 16×16 网格上一份带圆角文件轮廓 中心圆头加号的 SVG 路径支撑起内联 SVG、img、Sprite 和 CSS 字体四种渲染方案并可顺滑换色、无限缩放。开发者只需记住三点源文件看 icons/file-plus-fill.svg字体类名用bi-file-plus-fill码点为\f3aa即可在任意前端技术栈中稳定复用。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 的 Calendar Plus Fill 图标从 SVG 源码到 Web Font 的完整使用指南Bootstrap Icons 的 Calendar Plus Fill 图标从 SVG 源码到 Web Font 的完整使用指南 本指南围绕 Bootstr前端Bootstrap Icons 购物篮图标 basket3 完整使用指南SVG 源码、Web Font 与精灵图实战Bootstrap Icons 购物篮图标 basket3 完整使用指南SVG 源码、Web Font 与精灵图实战 basket3 是 Bootstrap前端Bootstrap Icons 的 file-earmark-fill 图标从 SVG 源码到字体引用的完整实战指南Bootstrap Icons 的 file earmark fill 图标从 SVG 源码到字体引用的完整实战指南 本文以 Bootstrap Icons前端上一篇Zed GPUI 深度拆解Entity 数据流三问与一个会偷走节点的坑下一篇如何快速配置跨平台文件下载地址获取工具终极完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考