search

CoreyGinnivan / system-uicons

System UIcons is an icon library design for systems and products. Use how you want, without attribution.
https://systemuicons.com/
The Unlicense
602 stars 24 forks source link

Unable to set color #15

Closed Wulfheart closed 3 years ago

Wulfheart commented 4 years ago

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 grafik

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?

CoreyGinnivan commented 4 years ago

To change the colour, currently you'll need to change the stroke="#2a2e3b" but I'll have a look in to other options :)

eden-lane commented 3 years ago

@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?

CoreyGinnivan commented 3 years ago

@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

rofrol commented 3 years ago

Is this fixed by https://github.com/CoreyGinnivan/system-uicons/pull/21?

CoreyGinnivan commented 3 years ago

Yep! All fixed