直接用 引入 svg 会错位失色，因不受 color/font-size 控制且 vertical-align: baseline；应内联 ，设 width="1em" height="1em" fill="currentcolor" 并统一 viewbox。
为什么直接 <img> 引入 SVG 图标在 Bootstrap 里会错位或失色？
Bootstrap 的图标样式（比如 .text-muted、.btn i）默认依赖字体图标的 CSS 规则，而 <img src="icon.svg"> 是独立内联元素，不受 color、font-size 控制，且默认 vertical-align: baseline，容易和文字对不齐。
- SVG 必须用
<svg></svg>标签内联，不能当图片引用 - 内联后需手动设置
width/height或用em单位适配字体大小 - 原始 SVG 文件里若含
fill="#000"等硬编码颜色，会覆盖 CSS 的color，得删掉或改成fill="currentColor"
<svg class="me-1" width="1em" height="1em" viewbox="0 0 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5h-2v2H7.5v-2H5.5v-1h2V5.5h1v1.001z"></path></svg>
如何让自定义 SVG 和 Bootstrap 的按钮、输入框等组件自然对齐？
关键不是调 margin，而是统一基线（baseline）和尺寸继承逻辑：
所有 SVG 添加
class="align-text-bottom"或style="vertical-align: -0.125em;"（Bootstrap 5 默认font-size: 1rem时，这个值最稳）宽高统一设为
1em，这样.btn-sm下自动缩放，.btn-lg下也同步变大避免固定像素值如
16px，否则响应式断点下会僵住不要用
<svg></svg>外层再套<i></i>—— Bootstrap 的.i类是为字体图标设计的，对 SVG 无效甚至干扰如果图标要响应文字颜色（比如暗色主题下自动变白），确保所有
<path></path>的fill属性都是currentColor，别漏掉<g></g>里的子元素
用 bootstrap-icons 的 SVG 源码做自定义图标，要注意哪些坑？
bootstrap-icons npm 包里 /icons/ 下的 SVG 文件是「原始素材」，不能直接复制粘贴进 HTML：
多数文件带
fill="currentColor"，这点好；但部分旧版图标仍写fill="#000"，必须手动替换有些图标含
<style></style>标签或class属性，Bootstrap 不认这些，删掉更干净viewBox值不统一（有"0 0 24 24"，也有"0 0 16 16"），混用会导致缩放比例不一致 —— 建议统一改用"0 0 16 16"，再通过width="1em"控制显示大小别直接从 CDN 加载单个 SVG 文件（如
@#@#@#@#@#@#@#@#@#@0），跨域、缓存、CSP 都可能拦住它如果项目用 Webpack/Vite，建议把 SVG 当模块引入：
import HeartIcon from './icons/heart-fill.svg?raw'，再用v-html或 ReactdangerouslySetInnerHTML渲染（注意 XSS）
SVG 图标在 IE11 或低版本 Edge 中不显示怎么办？
IE11 对内联 SVG 支持尚可，但有两个致命细节：
不支持
currentColor在<path></path>的fill里动态继承（只认<svg></svg>层的fill）若 SVG 里用了
<use></use>+<symbol></symbol>雪碧图方案，IE11 需额外加xmlns:xlink="@#@#@#@#@#@#@#@#@#@1"和xlink:href最简兼容写法：把
fill="currentColor"改成fill=""，然后靠<svg style="fill: currentColor;"></svg>统一控制不要指望
object或iframe方式加载 SVG —— Bootstrap 的布局类（如flex、grid）在 IE11 下对它们行为异常
事情说清了就结束。真正麻烦的不是怎么放进去，而是每次改一个图标都要检查三遍：viewBox 对不对、fill 写没写死、vertical-align 跟当前组件基线匹不匹配。
