Nuxt/VueJS中使用img标签引入SVG时currentColor无法生效的问题求助

我之前用currentColor配合SVG的fill属性修改图标颜色已经轻车熟路了，但这次在Nuxt项目里用<img>标签引入SVG时，这个方法突然不管用了，试了各种办法都没效果，有没有大佬能指点一下？

我遇到的具体情况： #

• 我给SVG根标签设置了fill="currentColor"，但通过<img>引入后，不管怎么设置颜色，SVG都不会跟着变化
• 试过的操作：
  • 给<img>、父级<NuxtLink>、最外层的.socials容器都加了Tailwind的text-white类
  • 在CSS里给.socials及其子元素a、img都设置了color: var(--white)和fill: var(--white)，甚至加了!important
  • 连给容器的父级再套一层设置颜色都试过了，完全没用
• 唯一能生效的方式：直接在SVG文件的<path>标签里写死fill颜色，但这显然不符合复用图标的需求
• 我的诉求：不想把SVG内联到页面里，希望能通过外部引入的方式用currentColor控制颜色

相关代码： #

我的SVG文件（insta.svg）：

<svg width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor">
  <g>
    <path d="M22.3,8.4c-0.8,0-1.4,0.6-1.4,1.4c0,0.8,0.6,1.4,1.4,1.4c0.8,0,1.4-0.6,1.4-1.4C23.7,9,23.1,8.4,22.3,8.4z"/>
    <path d="M16,10.2c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S19.3,10.2,16,10.2z M16,19.9c-2.1,0-3.8-1.7-3.8-3.8 c0-2.1,1.7-3.8,3.8-3.8c2.1,0,3.8,1.7,3.8,3.8C19.8,18.2,18.1,19.9,16,19.9z"/>
    <path d="M20.8,4h-9.5C7.2,4,4,7.2,4,11.2v9.5c0,4,3.2,7.2,7.2,7.2h9.5c4,0,7.2-3.2,7.2-7.2v-9.5C28,7.2,24.8,4,20.8,4z M25.7,20.8 c0,2.7-2.2,5-5,5h-9.5c-2.7,0-5-2.2-5-5v-9.5c0-2.7,2.2-5,5-5h9.5c2.7,0,5,2.2,5,5V20.8z"/>
  </g>
</svg>

Nuxt模板代码：

<div class="socials text-white">
  <NuxtLink to="https://www.instagram.com/blahblah" class="text-white">
    <img src="/images/icons/insta.svg" alt="Instagram" class="text-white"/>
  </NuxtLink>
</div>

自定义CSS：

.socials {
  color: var(--white);
  fill: var(--white);
  a {
    color: var(--white);
    fill: var(--white);
  }
  img {
    color: var(--white);
    fill: var(--white);
  }
}

有没有大佬知道问题出在哪？是不是Nuxt/Vue对外部引入的SVG有什么特殊限制？或者我需要换一种SVG的引入方式？

内容来源于stack exchange