如何修改通过<img>标签引入的外部SVG文件的颜色以适配主题切换？

通过<img>标签引入的外部SVG属于独立的外部资源，和当前页面的DOM、CSS隔离，默认无法直接通过页面CSS修改其内部的fill属性，以下是几种可行的适配明暗主题的方案：

方案1：使用CSS滤镜（无需修改SVG引入方式，最省事） #

直接给加载SVG的<img>标签设置不同主题下的filter属性，即可调整SVG的最终显示颜色：

/* 亮色模式下保持SVG原有颜色 */
.theme-light .svg-img {
  filter: none;
}
/* 暗色模式下将深色调SVG转为白色 */
.theme-dark .svg-img {
  filter: brightness(0) invert(1);
}
/* 如需自定义特定颜色，可组合使用sepia、saturate、hue-rotate、brightness等滤镜参数调整到目标颜色 */

方案2：内联SVG引入（可精准控制颜色，灵活性最高） #

使用构建工具（如Vite的?inline资源后缀、Webpack的svg-inline-loader）将SVG文件内容直接插入到页面DOM中，此时SVG的节点完全受当前页面CSS控制，配合CSS变量即可实现随主题变色：

1. 先定义全局主题颜色变量：

.theme-light {
  --icon-color: #212121;
}
.theme-dark {
  --icon-color: #f5f5f5;
}

2. 给内联SVG的路径设置fill属性：

.inline-svg path {
  fill: var(--icon-color);
}

方案3：使用SVG Sprite+currentColor（适合多图标场景） #

将所有SVG图标整合为雪碧图文件，把每个图标内部的fill属性改为currentColor，使用<use>标签引入图标，此时图标颜色会自动继承父元素的color属性值：

<!-- 父元素的color值会被SVG继承 -->
<div class="icon-box" style="color: var(--icon-color)">
  <svg class="icon">
    <use xlink:href="/themes/icons-sprite.svg#google-fonts-icon"></use>
  </svg>
</div>

如果必须保留<img>引入方式，也可以提前准备两套对应明暗主题的不同颜色SVG文件，切换主题时动态修改<img>的src属性即可，不过该方案维护成本相对更高。

内容的提问来源于stack exchange，提问作者Kh4lid MD