SVG line thickness not updating with variant

Hi All,

My issue is with a component library ive created

The idea was to create a selection icons with different line thicknesses so when i have a nested component inside it. what ever icon i select, the line thickness will stay change to the variant ive created.

I was able to get it to work with some premade icons on but if i create one myself. either on Figma or illustrator. the line thickness wont carry over to the new icon ive chosen.

i thought it might be something to do with making it a compound path. mainly because the premade ones looked like one object in the Figma file viewer. instead of separate parts.

Hopefully my screenshot will illustrate what i mean.

FYI the building looking one is the premade and the X line thing is one ive made up in illustrator/Figma (same result)

Hey @Ben_Buckley, thank you for reaching out and sharing screenshots!

So I might not follow completely. But I have tried to replicate this based on your text. I’ve created a component with variant which had different strokes. I was able to change the variant.

Please let me know what steps I am missing out.

Could you send me a screen recoding on what you’re seeing on your end when you mean “the line thickness wont carry over to the new icon I’ve chosen”.

Thank you in advance!

Thank you for the reply. I was very confused about the issue i was running in to but it looks like ive figured it out myself.

Basically I needed to keep the vector name the same throughout all the icons i used. the component name could be different but the vector inside needed to be the same. otherwise the nested icon inside the component would not update.

ive made a little video illustrating what i mean.


1 Like

Hey @Ben_Buckley , glad that you’ve found a workaround here! And thank you so much for sharing a screen recording with me! I would like to ask the team internally is this behaviour is intended I am not very sure myself.

Thanks again for your reply

No worries at all, the team confirmed that this looks like an expected behaviour.
Feel free to reach out if you have any further questions, happy to help out!

1 Like