An icon doesn't change color when making an instance swap with the new component properties

Ask the community
41

It functions effectively when the layer names are the same across all icons. In my design system, which comprises approximately 80 icons, the layer names are uniform, leading to seamless functionality.

Screenshot 2023-11-23 at 18.23.41
Screenshot 2023-11-23 at 18.23.41398×720 18.1 KB

43

Hi @Max_Swearl! I came across a similar issue, tried your approach but it still didn’t fix it. This is how my components look like:

SS
SS1841×663 70 KB

I’ve renamed them as you (and the article) mentioned but still when I take out a child of the icon button and change the icon to some other icon and then change the size property (defined in primitive) then the icon takes back the primitive’s icon colour. I’m not sure what I’m doing wrong. :face_with_raised_eyebrow:

Any feedback would be appreciated! :upside_down_face:

44

Hi @Deepika_D!
I am not certain, but I think this could be caused by the variants in your icon system.
In my case the primitive component is the simplest version possible and using auto-layout

image
image

45

Thanks @Max_Swearl for the reply!
Is your approach working even when you instance swap the icons?

When I swap the icon then it changes to primitive’s colour. :confused:
A glimpse of my issue.

46

Hi @Deepika_D !
Yes that was actually what I needed to achieve (i.e. instance swap where I would still get the correct color from the parent component e.g. in a navigation menu or a button).

I fiddled a lot with this, and the 3 main things I got from it are:

  1. Flatten all the vectors in an icon (and outline all strokes), and give it a generic name like Vector
    a. Color it with an unused color so that it’s clearer when it’s not working (good practice), but I’m not certain it changes anything in the end result
  2. Use auto-layout and adjust the padding until you get your desired height/width
    a. Not sure why I did this but I remember it being important. It may have more to do with dimensions properties of instances
  3. When instancing the icon in some other element (e.g. a button), rename the instance to a generic name like Icon

The last thing I got was to refrain using icon variants. For example, I won’t be using a main ic_Chevron_24px icon with 4 variants, but instead create 4 separated components called ic_Chevron_Left_24px, ic_Chevron_Right_24px, ic_Chevron_Up_24px, ic_Chevron_Down_24px.

47

Thanks for sharing, I’ll try this out