我正在用VueJS 3制作一个twitter克隆应用程序。
我将Twitter的徽标保存为一个.svg文件，并可以将其与<img />标签一起使用。当我为<svg>标签赋予fill="#fff"属性时，我还可以更改其颜色。但是，我希望在多个位置以不同的颜色使用此.svg文件。
所以我尝试通过给<img />标签类fill-white、bg-white和text-white来动态地改变svg的颜色，但是没有成功。

我当前的.svg文件-白色

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" aria-hidden="true">
    <g>
        <path fill="#fff" d="M23.643 4.937c-... 1.7-1.477 2.323-2.41z"></path>
    </g>
</svg>

图像标记

<img
 src="/twitter-bird.svg"
 draggable="false"
 class="w-52 lg:w-96 fill-white"
 alt="Twitter Bird"
/>

我在.svg文件上尝试了此操作

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" aria-hidden="true">
    <g>
        <path fill="params(fill) #fff" d="M23.643 4.937c-... 1.7-1.477 2.323-2.41z"></path>
    </g>
</svg>

我知道我需要使这个svg的颜色可编辑。但我找不到如何做到这一点。