Unable to set color
Wulfheart opened this issue · 5 comments
Hello,
I'm unable to set the color from a parent container in html.
<svg style="width:64px; height:64px; fill:red;" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)"><path d="m1.5 4.5h14v7.9976807c0 1.1045695-.8954305 2-2 2h-10c-1.1045695 0-2-.8954305-2-2zm0-3.9777832h14c.5522847 0 1 .44771525 1 1v1.9777832c0 .55228475-.4477153 1-1 1h-14c-.55228475 0-1-.44771525-1-1v-1.9777832c0-.55228475.44771525-1 1-1z"></path><path d="m6.5 7.5h4"></path></g></svg>
results in
As I'm building a utility which inserts svg icons directly from markup (e.g. <x-systemuicon-archive style="width:64px; height:64px; fill:red;" /> results in the code above. Is there any possibility to make this work with classes without modifying the svg files?
To change the colour, currently you'll need to change the stroke="#2a2e3b" but I'll have a look in to other options :)
@Wulfheart
You can change stroke of a svg file to currentColor. After that you can change parent's color to change svg color.
Wouldn't it be a good idea to use currentColor for every icon instead of constant for easier customisation?
@CoreyGinnivan what do you think?
@eden-lane Yeah absolutely. Was looking into that for the next round of updates. But if you wanted to jump in before and make a PR for the current one that'd be great
Yep! All fixed