前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载Calendar3 event 是 Bootstrap Icons 官方开源 SVG 图标库中“日期与时间”分类下的一枚日历事件图标用于表达“日历中的某个具体日程或邀请”语义。本文以 docs/content/icons/calendar3-event.md 这一图标文档为线索结合仓库中的 SVG 源文件、字体产物与构建脚本讲解该图标的元数据、矢量源码结构、各形态普通/填充差异以及在实际项目中引用它的完整方案帮助读者在开发中直接取用并理解其底层实现。图标文档与元数据calendar3-event 的定位在 Bootstrap Icons 仓库中每个图标都对应一份位于docs/content/icons/目录下的 Markdown 文档用于驱动官方文档站的图标索引页。calendar3-event.md 的内容即其 front matter 元数据--- title: Calendar3 event categories: - Date and time tags: - date - time - event - invite ---title: Calendar3 event图标在文档站上展示的名称同时也是语义化命名calendar3-event的可读形式。categories: Date and time该图标归属“日期与时间”分类。仓库中同一分类下还包含 calendar.md、calendar3.md、calendar3-range.md、calendar3-week.md 等一组日历类图标共同覆盖“日历、日期范围、周视图、事件”等细分语义。tags: date / time / event / invite检索标签event与invite表明该图标在语义上最适合表达日程安排、活动邀约等场景。这类元数据由文档构建流程消费仓库通过npm run pages见 package.json 中的pages: node build/build-pages.mjs为每个图标生成独立页面而 front matter 中的分类与标签则服务于文档站的分组浏览与站内搜索。因此在为本仓库文档站撰写内容时只要保持相同的 front matter 结构即可将新图标纳入既有索引体系。图标源码结构16×16 网格上的日历与事件点calendar3-event的实际矢量数据位于 icons/calendar3-event.svg完整源码如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-calendar3-event viewBox0 0 16 16 path dM14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z/ path dM12 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2/ /svg逐项解读该 SVG 的关键设计画布与坐标系统width16 height16、viewBox0 0 16 16图标基于 16×16 网格设计。这与 README.md 中“New glyphs are designed in Figma first on a 16x16px grid”的流程一致Bootstrap Icons 的全部字形均按该网格绘制。描边方式fillcurrentColor路径使用fill而非stroke填充颜色跟随 CSS 的color属性便于通过文本颜色类任意换色。命名与可寻址性classbi bi-calendar3-event该 class 名与图标名一一对应是与字体产物、Sprite 引用保持一致的稳定标识。路径几何第一段路径绘制日历主体——带圆角的外边框M14 0H2a2 2...与顶部的表头区M1 3.857...即日历的月份栏第二段路径M12 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2绘制网格内右上角的一个实心小圆点代表“事件标记”。整枚图标正是通过“日历 圆点”的组合传达“某日有日程/活动”的含义。填充变体calendar3-event-fill同一语义还提供填充版本 icons/calendar3-event-fill.svgsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-calendar3-event-fill viewBox0 0 16 16 path dM16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3h16zm-3-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2m1-5a2 2 0 0 1 2 2H0a2 2 0 0 1 2-2z/ /svg轮廓版.svg与填充版-fill.svg在 Bootstrap Icons 中是一对惯例组合前者适用于需要细线、轻量视觉的工具栏与表格场景后者适用于强调色块、主按钮等需要更高视觉权重的场景。calendar3-event-fill用一个单路径同时描述实心日历外框与圆点几何上比轮廓版更紧凑。配套构建流程新增或修改图标后仓库通过两条脚本链产出可分发的产物见 package.jsonnpm run icons依次执行icons-mainnode build/build-svgs.mjs用 SVGO 优化 SVG 并规范化属性顺序、icons-spritesvg-sprite --config svg-sprite.json生成 bootstrap-icons.svg 雪碧图与icons-font通过twbs/fantasticon生成字体与 CSS再用 clean-css 压缩出 font/bootstrap-icons.min.css。npm run pages为icons/目录下每个 SVG 生成带 front matter 的模板 Markdown 页面即docs/content/icons/下的图标文档。因此在仓库中calendar3-event同时存在于三个可消费形态独立 SVG 文件、雪碧图条目与图标字体字符。字体与 CSS 产物icon font 中的编码映射当使用图标字体方式引用时calendar3-event被编码进字体文件。在 font/bootstrap-icons.scss 中可以看到字体变量映射calendar3-event-fill: \f20d, calendar3-event: \f20e,对应的 CSS 规则位于 font/bootstrap-icons.css.bi-calendar3-event::before { content: \f20e; }而 font/bootstrap-icons.json 则记录了 Unicode 码点与图标名的映射关系calendar3-event-fill: 61965, calendar3-event: 6196661966即十六进制\f20e的十进制形式。由此可知Bootstrap Icons 的字体方案为每个图标分配私有使用区Private Use Area的固定码点并通过::before伪元素注入字形因此字体文件如 font/fonts/bootstrap-icons.woff2与 CSS 必须配套使用升级版本时不可只替换其中一部分。此外TypeScript 类型声明 font/bootstrap-icons.ts 中以字符串字面量联合类型列出了全部图标名其中包含calendar3-event与calendar3-event-fill供类型安全的图标名校验使用。使用方式SVG、Sprite 与字体三路并行的接入实践Bootstrap Icons 官方支持多种引入方式calendar3-event可按下述任一路径接入。方式一内联 SVG推荐可定制性最强直接从 icons/calendar3-event.svg 复制svg标签嵌入 HTML。由于使用fillcurrentColor可借助 CSS 的color属性或 Bootstrap 文本颜色工具类如text-primary直接换色也可在svg上覆写width/height调整尺寸svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-calendar3-event viewBox0 0 16 16 path dM14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z/ path dM12 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2/ /svg内联方式允许对内部路径进行二次加工例如替换圆点颜色、组合动画是最灵活的一种。方式二img引用将 SVG 作为独立资源引用适合无法直接内联、需要缓存复用的场景img src/icons/calendar3-event.svg alt日程事件 width16 height16注意以img方式引入时currentColor无法继承页面的color值颜色固定为 SVG 内部的填充设置因此换色需直接修改 SVG 文件或改用 CSSfilter。方式三SVG 雪碧图仓库通过svg-sprite将icons/*.svg合并为 bootstrap-icons.svg。页面中先引用雪碧图再用use按图标名取用svg classbi width16 height16 fillcurrentColor aria-hiddentrue use xlink:hrefbootstrap-icons.svg#calendar3-event/ /svg#calendar3-event锚点即图标文件的id对应文件名去扩展名整套雪碧图一次加载、多处复用适合图标数量较多的后台系统。方式四CSS 图标字体先通过 npm 或 Composer 安装见 README.mdnpm i bootstrap-icons或composer require twbs/bootstrap-icons然后引入样式并放置带 class 的元素link relstylesheet href/font/bootstrap-icons.css i classbi bi-calendar3-event/i渲染结果由 font/bootstrap-icons.css 中的.bi-calendar3-event::before { content: \f20e; }规则提供字形需要填充版时改用bi-calendar3-event-fill。字体方式依赖 CSS 中font-face声明的字体文件路径woff2/woff部署时需确保 font/fonts/ 下的字体资源与 CSS 处于正确相对位置。本地查看与文档开发如需在本地查看该图标在文档站中的展示效果可克隆仓库后运行git clone https://gitcode.com/gh_mirrors/ic/icons cd icons npm i npm startnpm start是docs-servehugo server --port 4000 --disableFastRender见 package.json的别名启动后访问http://localhost:4000即可浏览包含calendar3-event在内的全部图标页面。若仅需重新生成字体与雪碧图产物可执行npm run icons需要重新生成图标文档页则执行npm run pages。小结在日期时间 UI 中正确取用 calendar3-eventcalendar3-event是 Bootstrap Icons “日期与时间”分类中语义最聚焦的一枚图标——日历轮廓加圆点标记对应日程、活动与邀约场景。使用时可遵循以下要点语义匹配优先选它表达“某日有事件”相邻的可选图标包括表达月份视图的 calendar3.md、日期范围的 calendar3-range.md 与周视图的 calendar3-week.md。需要强调色块时切换到填充变体 calendar3-event-fill.svgclass 名与字体类名同步为bi-calendar3-event-fill。四种接入方式内联 SVG、img、雪碧图、字体各有适用场景内联与雪碧图保留currentColor换色能力img与字体方式在换色与资源路径上各有约束部署时务必核对字体文件路径。无论选择哪种方式其 class 名、字体码点\f20e与雪碧图锚点均以 font/bootstrap-icons.json 与 font/bootstrap-icons.scss 中的映射为准确保页面中的引用与当前仓库版本严格一致。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 日期时间图标解析calendar3-week-fill 的 SVG 结构、字体码点与应用实践Bootstrap Icons 日期时间图标解析calendar3 week fill 的 SVG 结构、字体码点与应用实践 导读 calendar3 w前端Bootstrap Icons calendar-check-fill 图标详解源码结构、CSS 字体引用与日期场景实践Bootstrap Icons calendar check fill 图标详解源码结构、CSS 字体引用与日期场景实践 本篇指南围绕 Bootstrap I前端Bootstrap Icons Balloon 图标详解SVG 源码、字体 Code Point 与生日场景实战Bootstrap Icons Balloon 图标详解SVG 源码、字体 Code Point 与生日场景实战 Bootstrap Icons 是 Boot前端上一篇NVIDIA显卡性能调优神器Profile Inspector完全使用指南下一篇Windows右键菜单管理专家ContextMenuManager完全使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考