如何修改SVG使其跟随Bootstrap主题自动适配颜色与尺寸

主题自带SVG能自动跟随Bootstrap样式的核心逻辑是：没有硬编码固定尺寸、颜色值，全部通过CSS继承父元素规则实现适配。第三方品牌方提供、PNG转换得到的SVG普遍带硬编码属性，优先级高于CSS继承，自然无法响应样式规则，按以下步骤调整即可实现完全一致的效果：

• 第一步：清理根节点硬编码尺寸
  找到SVG最外层的<svg>标签，删除所有写死的width="xxx"、height="xxx"属性，必须保留viewBox属性（删除会导致图标拉伸变形），将viewBox统一调整为和主题内置图标一致的正方形比例，常见为viewBox="0 0 16 16"或viewBox="0 0 24 24"，给根节点添加class="bi"和fill="currentColor"属性。
  调整前后代码对比如下：

  <!-- 调整前：带硬编码尺寸和固定填充色 -->
  <svg width="120px" height="120px" fill="#222222" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <!-- 调整后：无硬编码尺寸，支持样式继承 -->
  <svg class="bi" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  

• 第二步：清除内部硬编码颜色属性
  遍历SVG内部所有<path>、<circle>、<rect>等形状标签，删除所有硬编码的fill="#xxx"、stroke="#xxx"属性，以及内联样式中写死的fill:、stroke:规则。如果是多色图标，仅保留需要固定显示的色块色值，需要跟随主题色的部分统一使用currentColor作为填充/描边值即可。
  注意：PNG转码生成的SVG会给每个路径生成独立的内联style属性，必须全部清除，这类属性优先级高于CSS继承，是适配失败的最常见原因。

• 第三步：删除冗余垃圾代码
  转码工具、设计软件导出的SVG会携带大量无用属性，包括但不限于enable-background、随机生成的id属性、编辑器自定义的data-*标签、无用的滤镜/渐变定义，全部删除即可，不会影响图标显示效果，还能减小文件体积。

• 第四步：效果验证
  调整完成后直接给SVG标签添加Bootstrap工具类测试适配性，示例代码如下：

  <!-- 测试尺寸、颜色是否能正常响应 -->
  <svg class="bi fs-4 text-primary">
    <!-- 图标内部路径代码 -->
  </svg>
  

  如果图标可以正常匹配fs-4对应的字号尺寸、显示为text-primary对应的主题蓝色，说明适配成功，后续会和主题内置图标行为完全一致，自动继承父容器的字号、颜色规则。

踩坑提示：如果调整后样式仍不生效，优先检查是否有残留的内联style、硬编码fill属性，不要给SVG标签添加任何固定宽高属性，所有尺寸控制通过Bootstrap字号类、CSS字体大小规则实现，和Bootstrap原生图标逻辑保持一致即可。

内容的提问来源于stack exchange，提问作者Jo White