radix-ui / icons

A crisp set of 15×15 icons designed by the @workos team.
https://radix-ui.com/icons
MIT License
2.12k stars 104 forks source link

stroke width not calculated when passed as a prop to CheckIcon #155

Open mikeyamato opened 1 year ago

mikeyamato commented 1 year ago

I'm following the checkbox example in the documentation and added strokeWeight prop to <CheckIcon />. However, no matter what the value the weight doesn't change. I'm looking at the code and passing in the prop should work. I haven't tested this with other icons but I'm going to guess I'll see similar results. Meaning, no change.

<CheckIcon color={colors.white} strokeWidth={4} />
Screenshot 2023-05-15 at 4 41 18 PM
yusupsupriyadi commented 7 months ago

And all the icons don't work, even though the stroke value is read

mkellogg999 commented 6 months ago

I figured something out. In order to use "strokeWidth" you must also use "stroke". "stroke" should be set to the color you want the icon to be, so it would override the "color" prop.

I am also using the check icon, so naturally I don't want a rounded stroke. Unfortunately the check icon's path is already rounded, so even if you set strokeLinecap to "butt" and strokeLinejoin to "miter" the stroke will still be round.

j-machuca commented 5 months ago

I might be late to the party and just want to add that if you're using tailwind you are going to need to do the following

<HomeIcon className="text-sky-500" strokeWidth={1} stroke="currentColor"/>
benevbright commented 3 months ago

is there any way to use css variable color?