bootstrap icons改色应按图标类型选择方案：字体图标用color属性，内联svg用fill="currentcolor"配合父级color，filter仅对外链图片有效且不推荐；强行对无彩色矢量图使用hue-rotate等滤镜无效。
filter 对 Bootstrap Icons 大部分场景无效——因为图标本质是字体或内联 SVG，而 filter 作用于渲染后的像素层，对纯黑/白矢量图几乎无反应。真要“实时改色”，得先确认图标加载方式。
判断图标类型：font vs inline SVG vs img
Bootstrap Icons 默认提供三类集成方式，改色逻辑完全不同：
- 用
<i class="bi bi-heart"></i>→ 字体图标（font），color直接生效，filter无效 - 用
<svg class="bi" fill="currentColor"><use xlink:href="bootstrap-icons.svg#heart"></use></svg>→ 内联 SVG，fill="currentColor"+ 父级color控制最稳，filter可能失真 - 用
<img src="heart.svg">→ 外链 SVG 或 PNG，此时filter才真正起效，但受限于色相存在性
常见错误：给 <i class="bi bi-heart"></i> 加 filter: hue-rotate(90deg)，毫无变化——它根本不是图像，是文字字符。
font 图标改色：只用 color，别碰 filter
Bootstrap Icons 的字体版基于 OpenType 字形，颜色由文本色驱动：
- 直接写
.bi { color: #4285f4; }即可变蓝 - 支持伪类：
.nav-link:hover .bi { color: #ea4335; } - 暗色模式下用
@media (prefers-color-scheme: dark)切换color值即可，无需 JS - 避免
filter: invert(1)这类操作——会把整个<i></i>元素（含文字）反色，不可控
inline SVG 图标改色：靠 fill="currentColor" + CSS color
这是最推荐的现代方案，语义清晰、响应式友好、性能好：
- 确保 SVG 源码中所有
fill和stroke属性值为"currentColor"（不是#000或inherit） - 父容器设
color，例如.btn-primary { color: #fff; }→ 图标自动变白 - 不支持 IE11：若必须兼容，需用 JS 动态注入
fill值，或 fallback 到 font 版本 -
filter在此场景下是干扰项——它会叠加在已着色的 SVG 上，导致偏色或发灰，尤其在多层filter叠加时
为什么 hue-rotate() 经常没反应？
不是代码写错了，是输入源没色相：
- 字体图标和纯黑 SVG 路径的 RGB 值接近
(0, 0, 0)，属于无彩色，hue-rotate()无定义域 - DevTools 里用取色器点图标，若显示
rgb(0, 0, 0)或rgb(255, 255, 255)，说明“唤醒色相”成本远高于换方案 - 强行用
grayscale(0%) sepia(100%) saturate(1000%)拉出色相，参数极难调，且不同浏览器渲染偏差大 - 真正需要滤镜的场景，应限于外链 PNG / JPEG 图标，且明确接受其不可逆、非精确、性能开销大的事实
真正可控的颜色变更，永远始于源头控制：字体用 color，SVG 用 currentColor，别让 filter 承担它不该干的活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
