hi! i’ve a main component- which is a button. button consist of an icon (which is a component as well) + text.
when i try to use the variable button, there is no way i can reduce the size of the icon. is the only way to do so is to create another same icon component but in smaller size?
is it a common way to have a few icon size under design system?
TIA!
Hey! is there a reason you want the icon size to change? generally it is good to keep them consistent throughout your designs. Often Design systems might have a few set sizes (eg. for small, medium and large buttons) but for each of those sizes the icon size should remain consistent.
Your icons in your icon library should ideally be within frames that are all the same size. you can adjust the size of the icon within each frame so they look visually similar in size.
The icon library can all be one size, but you can adjust the icon size when you use it in the button component. (for example, a large button might have a 24pt icon, and a small button could have an 18pt icon)
When you use a button instance, you can swap the icon component and it should stay the same size.
Hope this helps?
Hey @Shuning , I had a similar question myself. I’ve been using @Ridd’s icon-wrapper method religiously for the past year and a half, but when variables came out I wondered if the method could be retired.
So far in my testing, I’ve found that the icon-wrapper method is still the best way to offer multiple icon sizes. I will likely write a longer more comprehensive blog post on this topic, I’ve seen this come up a lot since variables were released.
One note if you decide to use the icon wrapper method: pair it with the new component swap property for even better instance usability!
Hey @AlicePackard did you happen to experiment with the icon-wrapper method and nested instances in variants to have component properties overwrite the wrapper properties?
For example, i have a button with 2 states, which have different colors applied to. Inside my buttons i’m nesting an icon-wrapper with an instance swap applied to it. However when i’m instance swapping the color properties of the button states are not preserved.
The method im using works perfectly without the wrapper, but as soon as the wrapper is used the color properties are not overwritten as they are supposed to. This happens even if all the icons contain the same number of layers and are named “icon”. However if you go 3 layers into the nested instance, the names differ. Maybe that’s why it’s not overwriting properties.