前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载导读calendar-month-fill是 Bootstrap Icons本仓库即其官方开源图标库Date and time日期与时间分类下的填充风格日历月图标。本文以该图标的文档页docs/content/icons/calendar-month-fill.md为核心结合仓库内真实存在的 SVG 源文件、字体构建产物与 Sprite 符号完整讲解其视觉结构、与描边版calendar-month的差异以及在前端项目中四种主流接入方式读完即可在 Bootstrap 5 / Vue / React 等场景中直接落地使用。图标定位文档元数据与所属分类该图标在文档站点中的定位信息由 front matter 定义是整个图标体系检索与分类的基础--- title: Calendar month fill categories: - Date and time tags: - date - time - month ---分类categoriesDate and time与calendar、calendar-check、calendar-event、calendar-week等同类图标归入同一导航分组标签tagsdate、time、month用于图标搜索时的关键词命中标题titleCalendar month fill其中fill后缀明确标识这是日历的实心填充版本。仓库中的每个图标都对应一份这样的独立文档页docs/content/icons/*.md共 2080 份正文由 docs/layouts 下的 Hugo 模板渲染为图标预览、复制代码等交互卡片。理解这层元数据有助于判断在什么业务语义下选用该图标——它最适合表达按月查看日历、某月内的日期记录等填充态语义。SVG 源文件解剖图标是如何画出来的图标的本体是 icons/calendar-month-fill.svg一个 16×16 的矢量图形包含两个pathsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-calendar-month-fill viewBox0 0 16 16 path dM4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zm.104 7.305L4.9 10.18H3.284l.8-2.375zm9.074 2.297c0-.832-.414-1.36-1.062-1.36-.692 0-1.098.492-1.098 1.36v.253c0 .852.406 1.364 1.098 1.364.671 0 1.062-.516 1.062-1.364z/ path dM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2M2.56 12.332h-.71L3.748 7h.696l1.898 5.332h-.719l-.539-1.602H3.1zm7.29-4.105v4.105h-.668v-.539h-.027c-.145.324-.532.605-1.188.605-.847 0-1.453-.484-1.453-1.425V8.227h.676v2.554c0 .766.441 1.012.98 1.012.59 0 1.004-.371 1.004-1.023V8.227zm1.273 4.41c.075.332.422.636.985.636.648 0 1.07-.378 1.07-1.023v-.605h-.02c-.163.355-.613.648-1.171.648-.957 0-1.64-.672-1.64-1.902v-.34c0-1.207.675-1.887 1.64-1.887.558 0 1.004.293 1.195.64h.02v-.577h.648v4.03c0 1.052-.816 1.579-1.746 1.579-1.043 0-1.574-.516-1.668-1.2z/ /svg几个值得注意的实现细节描边/填充双份体系仓库同时维护了描边版 icons/calendar-month.svg 与填充版calendar-month-fill.svg。对比两份源文件可见填充版的日历外框直接由实心矩形路径构成没有外描边的空隙而描边版则保留了独立的边框路径两者中间的数字区域12/31式的月历数字路径一致只是填充版整体被实心化。这是 Bootstrap Icons 常见的成对命名约定-fill后缀表示实心变体。fillcurrentColor颜色跟随文本颜色CSS 的color因此无需针对不同主题单独导出彩色图标。classbi bi-calendar-month-fill即使直接复制svg内联使用也保留图标类名方便与字体图标保持一致的样式钩子。月历数字细节第二个 path 中M2.56 12.332h-.71L3.748 7h...一段实际绘制的是日历格内的月份数字/文字占位与描边版共享同一段数字字形保证成对图标视觉一致。字体接入一个类名一个 Unicode 码位Bootstrap Icons 会把全部 SVG 编译进 Web 字体。calendar-month-fill的字体映射存在于三处构建产物中可以交叉验证font/bootstrap-icons.css.bi-calendar-month-fill::before { content: \f1ec; }font/bootstrap-icons.scss同样映射到\f1ecfont/bootstrap-icons.jsoncalendar-month-fill: 61932十进制即0xF1EC接入方式需先引入font/bootstrap-icons.css或编译 Sass 版i classbi bi-calendar-month-fill/i代码点codepoint\f1ec对应 Private Use AreaPUA所以同一字体文件中不同图标之间不会冲突。若需要直接写 Unicode 字符可用#xf1ec;或字符串\uF1EC。SVG Sprite 接入一个文件、按需引用仓库根目录的 bootstrap-icons.svg 是编译生成的 SVG Sprite 文件其中包含symbol idcalendar-month-fill viewBox0 0 16 16定义。Sprite 方式的优势是只需加载一个文件、通过use按需引用任意图标svg classbi width32 height32 fillcurrentColor aria-label日历月 use xlink:hrefbootstrap-icons.svg#calendar-month-fill/ /svg该文件由构建脚本通过svg-sprite生成见 package.json 中的icons-sprite脚本svg-sprite --config svg-sprite.json --loginfo icons/*.svg。直接使用 SVG 文件/内联最灵活的方式是直接拷贝 icons/calendar-month-fill.svg 到项目静态资源目录或内联到组件中。由于图标只有 16×16、内容只有两个 path体积极小非常适合按需内联。在 React 中可封装const CalendarMonthFill ({ size 16, color currentColor }) ( svg width{size} height{size} fill{color} viewBox0 0 16 16 path dM4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4z.../ path dM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2M2.56 12.332.../ /svg );与描边版成对使用calendar-monthvscalendar-month-fillcalendar-month.svg描边线性风格适合正文旁、次要操作、浅色场景calendar-month-fill填充风格适合需要强调、选中态、按钮/徽标等场景。字体映射中两者相邻calendar-month-fill码位61932calendar-month码位61933文档站点也会将成对图标并排展示便于设计师对比取舍。更多同类日历 时间图标同一分类下见 font/bootstrap-icons.json还提供大量语义化变体可供组合图标含义码位十进制calendar-fill日历填充61929calendar-check-fill日历勾选61921calendar-event-fill日历事件61927calendar-week-fill日历周61938calendar-range-fill日历区间61936calendar2-month-fill日历二号风格月61954calendar-month-fill日历月本文61932选择建议表达整个月份用calendar-month-fill表达某天某事件用calendar-event系列表达勾选完成日期用calendar-check系列。自定义与本地构建该仓库图标均以独立 SVG 文件形式存放于 icons 目录每个图标一个.svg可直接预览。若需在本地重新生成字体/Sprite可运行npm install npm run icons # 重新构建 font/ 与 bootstrap-icons.svg npm run docs-serve # 启动本地文档站点Hugo端口 4000构建链路为build/build-svgs.mjs处理 SVG →fantasticon生成字体 →svg-sprite生成 Sprite →cleancss压缩 CSS见 package.json 的icons、icons-font、icons-sprite脚本。因此font/bootstrap-icons.css中.bi-calendar-month-fill::before的\f1ec与icons/calendar-month-fill.svg的路径始终一一对应二者以源码目录为单一事实来源。小结calendar-month-fill是日期与时间分类下语义最明确的填充版日历月图标16×16 单色矢量、currentColor取色、以-fill后缀与描边版成对出现。接入时按场景选择追求极简用字体类名bi bi-calendar-month-fill码位\f1ec追求按需加载用 Spriteuse追求无依赖用内联 SVG。需要修改视觉样式时直接编辑 icons/calendar-month-fill.svg 并运行npm run icons即可同步更新字体与 Sprite 产物。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 的 bag-check-fill 图标SVG 结构、字体内码与前端用法完全指南Bootstrap Icons 的 bag check fill 图标SVG 结构、字体内码与前端用法完全指南 导读本文以 Bootstrap Icons前端Bootstrap Icons 心形购物袋图标详解bag-heart-fill 的 SVG 结构、字体码点与前端接入实战Bootstrap Icons 心形购物袋图标详解bag heart fill 的 SVG 结构、字体码点与前端接入实战 Bootstrap Icons 是前端Bootstrap Icons 数字图标解析6 square fill 的设计结构与前端使用指南Bootstrap Icons 数字图标解析6 square fill 的设计结构与前端使用指南 Bootstrap Icons 是 Bootstrap 官方前端上一篇Vue3项目中的ts-toolbelt应用组合式API的类型增强技巧下一篇使用 expo-calendar 接入系统日历事件、提醒与权限配置完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考