#Vector not applying same color after swap

26 messages · Page 1 of 1 (latest)

fiery light
#

Any reason why a vector icon - particularly one made of multiple, separate shapes - will not assume the color of a previous icon it's being swapped with? I've tried flattening it, etc.

stark trench
#

Swapping doesn't change the main component properties.

#

You can either create multiple variants types , for color change property. Or change manually for each icon.

fiery light
#

Thanks for the reply. Some of the icons do take on the same color, as you can see in the video. And all of these icons are simple vector shapes, though some have the union icon in the layers panel and some have a representation of their shape, if that makes a difference.

stark trench
prisma gazelle
#

Actually, I'm having a very similar problem trying to do instance swaps with icons. Can I get in on this too so I don't have to make a new topic?

#

I made each of my icons into components, and I'm trying to make another component that uses the icons and set up an instance swap. But for some of the icons, the color doesn't change how it should; I just get a whole solid square of the color instead of the icon changing color.

#

I was hoping that instance swapping would help me have the icon immediately be the color I want based on how the parent component is put together, but would it be better for me to make color variants for every single icon instead?

stark trench
# prisma gazelle I was hoping that instance swapping would help me have the icon immediately be t...

That's not how instance swap works.

For your problem, there are two solutions
1: You can copy paste the properties of your whole frame / component to any instance you want to, & that gives you the final result you need.

2: You can create different variants of colors , as you already guessed. If you want to use variants for this, use it as a Boolean property so you don't have to manage the layers , & you'll be able to quickly change your instance.

There are other ways to do this same thing. But these would solve your problem.

#

If you want more clarity for the components, watch MDS' tutorial on YT - Interactive Components ( don't remember the exact name)

prisma gazelle
#

ahhh ok! Thank you!

Do you mean using Booleans to switch between two color choices?

stark trench
prisma gazelle
#

Or is it like, switch on for this color, off for not, and then you just set as many of those as the number of colors you have?

stark trench
#

But will make it easier to change colors.

prisma gazelle
#

Ok ok. Maybe if I have so many possible colors, variants of the icons would be better?

stark trench
prisma gazelle
#

(saying this makes me think maybe I have too many colors happening....)

stark trench
#

Just make the hover & click states for those

prisma gazelle
#

ahhh, ok I thought I was setting these up to be hover and click states, but maybe making them component variants is not the right way to go about it?

#

The video explanation of Booleans is great. Thank you!

fiery light
#

I don't see this as a viable solution, actually. Colors should be assigned to styles and shouldn't have to be maintained as variants, in my opinion. Shouldn't have to be, with have to being the key words there.

In my case, I'm just duplicating an existing frame and swapping out the icon asset. Doing so maintains the color 90% of the time. However for some icon assets, this color is not inherited and instead the native icon component color is used (per the video). Still can't figure out why.

ancient fox