Can't set icons path color through CSS in Vue 3

Question

Using the iconify library for VueJS, the icons' paths will have currentColor as their fill by default. The problem is, I cannot for whatever reason set a paths color through css. If I document.querySelector('path').style.color = 'red' it works as expected and currentColor will be red. Using !important also has no effect. At first I thought my CSS selector was wrong, but path { color: red; } should have the same effect as the JS mentioned above. There must be a solution to this and I'm definitely not doing hover color handling through JS when I should be able to do it with 2 lines CSS code.

I got it to work using raw SVGs, but it gets very messy and is a pain to manage so I wanted to at least ask if somebody has a solution/work aroud for this before fully committing.

My simplified code:

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

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

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

<style scoped>
path {
    color: red; // doesnt work
    fill: red; // doesnt work
    color: red !important; // doesnt work
}

svg path {
    // same contents as path but doesnt work
}
</style>

Answer 1

You should use the property fill instead of color when working with SVG paths :

path {
  fill: red;
}

in scoped style use :deep directive :

<style scoped>
:deep(path){
  fill: red;
}
</style>

You could also apply class colors from tailwind directly on the icon component :

<IconInstagram class="h-6 w-6 text-red-500" />