Currently, I am facing challenges when attempting to override a class within Jekyll while utilizing Stylus for the CSS.
The issue arises with an inline SVG saved in an HTML file that is included at the start of the page body. It consists of 6 path elements, each belonging to one of three different classes: fill-color1, fill-color2, and fill-color3.
<symbol id="my-icon" viewBox="0 0 5461 1024">
<title>my-icon</title>
<path class="fill-color1" d="M33.706 ..."></path>
...
</symbol>
I want to use this SVG in two distinct parts of my website, each with different backgrounds. Hence, it seemed ideal to assign unique colors to the fill elements.
In the HTML, the SVG is called as follows:
<svg class="class1 class2 class3">
<use xlink:href="#my-icon"></use></svg>
Where class1 and class2 are classes also utilized for other images (excluding the fill element), whereas class3 is intended to alter the behavior of the fill element. In one instance, it would be like:
<svg class="class1 class2 class3a">
<use xlink:href="#my-icon"></use></svg>
And in the second case:
<svg class="class1 class2 class3b">
<use xlink:href="#my-icon"></use></svg>
Regrettably, I am struggling to grasp how to handle this in CSS. Every attempt so far applies the same color to both instances instead of allowing individual colors. It seems there might be an issue with altering the behavior of different descendant elements, but I cannot be certain. How should the CSS code be structured to address this issue effectively?