Bootstrap CSS 能覆盖 SVG 的 fill 内联属性，是因为其规则使用了 !important（如 .bi { fill: currentColor !important; }），使 CSS 优先级高于内联样式；fill="currentColor" 仅是占位，实际由 CSS 强制接管；深色模式下需确保父元素 color 值响应式变化，否则 currentColor 不会更新。
Bootstrap CSS 为什么能覆盖 fill 内联属性？
不是 Bootstrap “特意”要覆盖，而是它用的 CSS 规则优先级高于 SVG 元素上的内联 fill 属性。关键点在于：Bootstrap Icons 的 CSS 文件里大量使用了 !important，比如 .bi { fill: currentColor !important; }。浏览器样式权重规则是：内联样式（如 fill="red"）本应高于普通 CSS，但一旦 CSS 带了 !important，就反超了——这是标准行为，不是 Bug。
fill="currentColor" 被强制重写时的表现
Bootstrap Icons 的原始 SVG 源码（如 clipboard-fill.svg）里本身就有 fill="currentColor"，但它的作用只是“占位”。真正生效的是 Bootstrap 的 CSS 类（如 .bi-clipboard-fill）通过 fill: currentColor !important 强制接管。此时即使你手动删掉 SVG 中的 fill 属性，图标颜色依然由 CSS 控制；反之，若你给 <path></path> 加了 fill="#ff0000"，也会被这条带 !important 的规则盖掉。
- 检查 Elements 面板时，能看到
Computed标签下fill值来自.bi类，且标记为!important - 临时禁用该 CSS 规则，
fill才会回落到你写的内联值或继承链 - 这种设计是为了统一主题色联动，但代价是牺牲了对单个图标的直接控制权
想保留内联 fill，必须绕过 Bootstrap 的 CSS 注入
只要 Bootstrap 的 CSS 文件被加载，它的 .bi 规则就会全局生效。所以“保留内联 fill”不是改 HTML 就行，得切断样式来源：
- 不引入
bootstrap-icons.css，只用原始 SVG 文件内联（即把clipboard-fill.svg的内容完整粘进 HTML） - 如果用了构建工具（如 Vite + SVGR），配置
svgoConfig移除所有fill属性，并关闭自动注入 Bootstrap 类名 - 用
<img src="clipboard-fill.svg">方式引入——但这意味着彻底放弃 CSS 控制，fill只能靠 SVG 文件自身定义
深色模式下容易忽略的继承断点
很多人发现加了 dark:text-white，图标却没变白，问题不在 Bootstrap CSS，而在 currentColor 的取值逻辑：它只读取父元素当前**计算后**的 color 值。如果父容器用的是 color: #333 这类固定值，深色模式媒体查询不会自动刷新这个值；而 Bootstrap 的 .bi 类又强制把 fill 绑定到 currentColor，结果就是深色模式下图标还是黑的。
立即学习“前端免费学习笔记（深入）”；
真正起效的方式是让父级 color 值本身响应暗色模式，例如：color: var(--text-color); --text-color: #111; @media (prefers-color-scheme: dark) { :root { --text-color: #fff; } }。否则，再强的 CSS 也填不满这个继承断层。
