Question 328300 in CSS Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Using Vues 'deep' CSS selector, it works as expected.

    a:hover >>> path {
    color: red !important;
}

  2. 0

    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" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search