前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载导读bell-slash斜线划过的铃铛是 Bootstrap Icons 官方开源 SVG 图标库中隶属于Communications通讯分类的核心图标之一专用于表达“通知已静音、提醒已关闭、勿扰模式”等语义。本文以 docs/content/icons/bell-slash.md 为主线完整梳理该图标的元数据定义、原始 SVG 源码结构、在 CSS 字体woff/woff2、SCSS 变量、TypeScript 类型与 JSON 映射中的全链路实现并给出可直接复制使用的四种前端接入方式内联 SVG、img引用、SVG Sprite、CSS 字体类帮助你准确地在项目中落地“静音通知”这一 UI 状态。一、图标定位与元数据Communications 分类下的“静音通知”语义在 Bootstrap Icons 中每个图标对应一份位于 docs/content/icons 目录下的 Hugo Markdown 文档其 front matter 承担图标页面的分类与标签元数据。bell-slash的文档 docs/content/icons/bell-slash.md 定义如下--- title: Bell slash categories: - Communications tags: - notification - silenced - clock ---其中title: Bell slash图标的展示名称用于图标检索页icons 目录下同类文档均遵循title命名。categories: Communications图标归档到通讯大类。同目录下的 bell.md、bell-slash-fill.md 也归属该分类说明整个铃铛系列图标在信息架构上被统一管理。tags用于搜索的语义标签——notification通知、silenced已静音、clock时钟/提醒时间。这三个标签准确刻画了该图标的业务语义它表示“通知铃铛被斜线禁用”即提醒被静音或暂停而不是普通铃铛的“有新通知”状态。与同系列图标的语义区分为避免在项目中使用时选错图标这里给出铃铛系列三个核心成员均可从 icons 目录查看原始 SVG图标文件文档语义icons/bell.svgbell.md普通通知、有新提醒icons/bell-slash.svgbell-slash.md本文主题通知已静音、提醒关闭icons/bell-slash-fill.svgbell-slash-fill.md静音通知的实心填充变体从源码结构看bell-slash-fill是bell-slash的“填充版”两者在 CSS 字体中相邻定义见下文代码表可在需要强调视觉权重时相互替换。二、SVG 源码级拆解16×16 网格上的“铃铛 斜线”路径bell-slash的原始 SVG 位于 icons/bell-slash.svg内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-bell-slash viewBox0 0 16 16 path dM5.164 14H15c-.299-.199-.557-.553-.78-1-.9-1.8-1.22-5.12-1.22-6q0-.396-.06-.776l-.938.938c.02.708.157 2.154.457 3.58.161.767.377 1.566.663 2.258H6.164zm5.581-9.91a4 4 0 0 0-1.948-1.01L8 2.917l-.797.161A4 4 0 0 0 4 7c0 .628-.134 2.197-.459 3.742q-.075.358-.166.718l-1.653 1.653q.03-.055.059-.113C2.679 11.2 3 7.88 3 7c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0c.942.19 1.788.645 2.457 1.284zM10 15a2 2 0 1 1-4 0zm-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75z/ /svg关键设计特征统一的 16×16 网格与 viewBox所有 Bootstrap Icons 都在 16×16 的网格上绘制README 中亦说明新图标在 Figma 中按 16×16px 网格设计viewBox0 0 16 16保证任意尺寸缩放不失真。fillcurrentColor与classbi bi-bell-slash填充色继承当前文本颜色配合bi前缀类名可直接被项目的 CSS 主题色驱动。多段路径合成的三个视觉要素铃铛罩体轮廓M5.164 14H15c...与m5.581-9.91a4 4 0 0 0-1.948-1.01...两段勾勒出顶部铃身与内部撞锤的负空间铃锤吊坠M10 15a2 2 0 1 1-4 0z底部以a2 2圆弧绘制的圆形铃锤对角线划除线m-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75z从左上到右下、带圆角端帽的斜杠正是“slash”语义的视觉载体。单path单填充README 明确说明新图标以扁平化fill无 stroke方式导出因此整个图标仅由一个填充路径构成便于字体化与换色。作为对照bell-slash-fill的源码 icons/bell-slash-fill.svg 结构相同仅路径数据更精简内部负空间更少视觉上呈实心风格适合列表项、标签等需要更重视觉的场景。三、字体化链路从 SVG 到 CSS / SCSS / JSON / TS 的一体化产物Bootstrap Icons 通过 npm 脚本把icons/目录下的原始 SVG 批量加工为字体与映射文件。以bell-slash为例其在 font 目录下的四处产物完全一致3.1 CSS 类font/bootstrap-icons.css.bi-bell-slash::before { content: \f631; }相邻的填充版.bi-bell-slash-fill::before { content: \f630; }该文件中所有图标类共用同一套font-face与基线样式见同文件顶部字体的font-family: bootstrap-icons字形数据来自 font/fonts/bootstrap-icons.woff 与 font/fonts/bootstrap-icons.woff2。3.2 SCSS 变量表font/bootstrap-icons.scssSCSS 版本把映射表暴露为 Sass 变量便于在编译期引用bell-slash-fill: \f630, bell-slash: \f631,3.3 JSON 编码映射font/bootstrap-icons.jsonJSON 版本给出的是字形对应的 Unicode 十进制码点bell-slash-fill: 63024, bell-slash: 63025,63024十进制即\f63063025 即\f631两者一一对应。3.4 TypeScript 类型font/bootstrap-icons.tsTS 版本为全量图标名生成了字符串字面量联合类型可在编译期校验图标名拼写| bell-slash-fill | bell-slashpackage.json中types: font/bootstrap-icons.ts字段使该文件成为包的 TS 类型入口配合style: font/bootstrap-icons.css、sass: font/bootstrap-icons.scss构成完整的前端接入面。3.5 生产链路脚本从 package.json 的scripts可以看到这些产物是如何生成的npm run icons-mainnode build/build-svgs.mjs用 SVGO 优化并规范化icons/*.svg属性npm run icons-spritesvg-sprite --config svg-sprite.json icons/*.svg按 svg-sprite.json 配置生成 bootstrap-icons.svg 雪碧图npm run icons-font-mainfantasticon将 SVG 编译为 woff/woff2 字体npm run icons-font-min用 clean-css 压缩出 font/bootstrap-icons.min.css。也就是说仓库中的font/**与bootstrap-icons.svg属于自动生成产物README 亦提醒提交时排除这些文件以避免冲突而icons/*.svg才是设计源头。四、实战接入静音通知图标的前端使用方案bell-slash发布在 npm 包bootstrap-icons当前仓库版本为 1.13.1见 package.json。以下四种方式均可在不修改仓库的前提下直接用于你的项目。方式一内联 SVG零依赖、最灵活把 icons/bell-slash.svg 的svg直接粘贴进 HTML。由于使用currentColor颜色自动跟随父元素button classmute-btn svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-bell-slash viewBox0 0 16 16 path dM5.164 14H15c-.299-.199-.557-.553-.78-1-.9-1.8-1.22-5.12-1.22-6q0-.396-.06-.776l-.938.938c.02.708.157 2.154.457 3.58.161.767.377 1.566.663 2.258H6.164zm5.581-9.91a4 4 0 0 0-1.948-1.01L8 2.917l-.797.161A4 4 0 0 0 4 7c0 .628-.134 2.197-.459 3.742q-.075.358-.166.718l-1.653 1.653q.03-.055.059-.113C2.679 11.2 3 7.88 3 7c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0c.942.19 1.788.645 2.457 1.284zM10 15a2 2 0 1 1-4 0zm-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75z/ /svg 已静音 /button.mute-btn { color: #6c757d; } /* 灰色表示静音态 */ .mute-btn:hover { color: #dc3545; } /* 悬停可切换到红色强调 */方式二img引用将 SVG 作为静态资源引入适合模板中不便内联的场景img srcicons/bell-slash.svg alt通知已静音 width16 height16注意img方式下 SVG 的currentColor无法继承页面文本色需要直接修改 SVG 文件或外层包装容器来控制颜色。方式三SVG Sprite复用加载性能友好仓库根目录的 bootstrap-icons.svg 是由npm run icons-sprite生成的雪碧图。引入后用use按#bi-bell-slash符号引用svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#bi-bell-slash/ /svg方式四CSS 字体类一行引入、全局可用安装依赖后引入样式再使用bi bi-bell-slash类npm i bootstrap-icons!-- 按需引入 CSS或使用压缩版 font/bootstrap-icons.min.css -- link relstylesheet hrefnode_modules/bootstrap-icons/font/bootstrap-icons.css i classbi bi-bell-slash/i字体方式下图形成色同样继承currentColor可直接通过 CSS 的color属性控制.bi-bell-slash { color: #6c757d; font-size: 1.25rem; }在通知面板中切换静音状态一个典型用法是根据开关状态动态切换bi-bell与bi-bell-slash两个类向用户直观反馈“通知开/关”button idnotifToggle classbtn btn-outline-secondary i classbi bi-bell idnotifIcon/i /button script const btn document.getElementById(notifToggle); const icon document.getElementById(notifIcon); let muted false; btn.addEventListener(click, () { muted !muted; icon.className bi (muted ? bi-bell-slash : bi-bell); }); /script五、小结与自查清单bell-slash是 Bootstrap Icons 中表达“通知静音/提醒关闭”的标准图标语义定位Communications 分类标签为 notification / silenced / clock与 icons/bell-slash-fill.svg 互为填充变体设计规范16×16 viewBox、单路径、fillcurrentColor、bi前缀类名遵循 README 中“扁平化填充、无 stroke”的导出规范多形态产物同一图标在 font/bootstrap-icons.css\f631、font/bootstrap-icons.scss、font/bootstrap-icons.json码点 63025与 font/bootstrap-icons.ts 中保持一致全部由npm run icons链路自动生成接入建议单次使用选内联 SVG多处复用选 SVG Sprite全局大规模使用选 CSS 字体类涉及 TypeScript 项目时font/bootstrap-icons.ts导出的联合类型可在编译期帮你规避图标名拼写错误。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 中的 Alarm 图标从 SVG 源文件到图标字体与 Sprite 的完整使用指南Bootstrap Icons 中的 Alarm 图标从 SVG 源文件到图标字体与 Sprite 的完整使用指南 Alarm 是 Bootstrap Ico前端ChuanhuChatGPT前端字体图标优化从Font Awesome到SVG SpriteChuanhuChatGPT前端字体图标优化从Font Awesome到SVG Sprite 一、字体图标现状分析 1.1 Font Awesome使用痛点人工智能大模型AI 应用AI AgentRAG本地部署微调后端VS Code语言支持与智能感知从语法解析到语义理解的全链路实现VS Code语言支持与智能感知从语法解析到语义理解的全链路实现 引言开发者的智能编码助手 你是否曾在编写代码时为记不住API参数而反复查阅文档是否在调开发工具代码编辑器上一篇跨平台开源工具你的数字资产智能管家下一篇B站成分检测器终极指南5分钟快速上手让评论区用户身份一目了然创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考