Preserve component color property when changing component state and icon size

Ask the community
1

I have a button component with a nested icon placeholder component. The icon placeholder component allows instance swap of the icon and also allows resizing of the icon.

Icon placeholder component & properties:

Screenshot 2024-07-30 at 1.39.49 PM
Screenshot 2024-07-30 at 1.39.49 PM1248×436 24.4 KB

Icon placeholder component layer structure:

Screenshot 2024-07-30 at 1.40.20 PM
Screenshot 2024-07-30 at 1.40.20 PM384×621 18.6 KB

Button component with nested icon placeholder component & properties:

Screenshot 2024-07-30 at 1.41.53 PM
Screenshot 2024-07-30 at 1.41.53 PM767×486 59 KB

The instance swap of the icon for another icon works and preserves the color properties across the different button states.

The issue I’m running into is that the color properties break once I resize the icon. Icon color is not preserved between button states and it even breaks the icon size preservation between button states. Even returning the icon size back to the default doesn’t restore the color properties. The only way to restore the color properties is to “reset the component”.

I have tried the union the nested icon tip outlined HERE but it’s messing with the auto layout of the button as it causes auto layout to ignore the icon component frame and uses the inner icon vector for the auto layout spacing.

Any help to resolve this would be appreciated!

2

Nvm, I got it to work with much trial and error.

STEPS

  1. Create Icon atom.
  2. Take Icon atom instance and create your size variants.
  3. Union all variants (note - this will mess up the sizing and padding).
  4. Reapply the sizing and padding specs to each variant at both the top variant level and at the bottom instance level (skip the union level).
  5. At the top variant level, set your min width and height to that variant’s dimensions (eg. 24px, 20px, etc.).
  6. Select all variants and “Create component set” for your Icon Wrapper.
  7. Then just set up your size and instance swap properties.
  8. Add the Icon Wrapper to your group component (make sure to set the specs to “hug”.
2 Likes
3

Hey @Benjamin_Shimazu, sorry for the delayed reply but happy to hear you were able to solve this!

I’ve marked your follow-up reply as the solution. Please let us know if you run into any further issues.