Vue3中无法通过CSS设置Iconify图标path颜色的问题求助

在Vue中使用iconify-prerendered库时，图标path的fill默认值为currentColor，但无法通过CSS设置颜色。用document.querySelector('path').style.color = 'red'能正常生效，让currentColor变为红色，但CSS选择器（如path { color: red; }）哪怕加上!important也无效。原生SVG能实现需求但维护繁琐，寻求解决方案或替代方法。

简化代码示例：

<script setup>
import { IconInstagram, IconGithub, IconLinkedinIn } from '@iconify-prerendered/vue-fa-brands';

document.querySelector('path').style.color = 'red' // 生效
</script>

<template>
<a href="" class="flex items-center justify-center"><IconInstagram class="h-6 w-6" /></a> <!-- text-red-500 无效 -->
</template>

<style scoped>
path {
    color: red; // 无效
    fill: red; // 无效
    color: red !important; // 无效
}

svg path {
    // 同样无效
}
</style>

• 用Vue深度选择器穿透scoped样式：IconInstagram是独立子组件，scoped样式默认无法作用到它内部的path元素。用Vue3的::v-deep（或Vue2的/deep/）即可穿透隔离：

<style scoped>
::v-deep .h-6 path {
    color: red;
}
</style>

• 利用currentColor的继承特性：currentColor会自动继承父元素的color值，直接给图标组件或其父元素加颜色类就能生效：

<template>
<!-- 直接给图标加颜色类 -->
<a href="" class="flex items-center justify-center"><IconInstagram class="h-6 w-6 text-red-500" /></a>
<!-- 或给父元素设置颜色 -->
<a href="" class="flex items-center justify-center text-red-500"><IconInstagram class="h-6 w-6" /></a>
</template>

• 移除style的scoped属性：如果不需要样式隔离，把<style scoped>改成普通<style>，直接写的CSS选择器就能作用到图标内部的path，但要注意可能影响全局样式。
• 使用组件的color属性：该库的Vue组件支持直接传入color props设置颜色：

<IconInstagram class="h-6 w-6" color="red" />
<!-- 动态绑定颜色 -->
<IconInstagram class="h-6 w-6" :color="iconColor" />

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