Buttons Icons don't respect styles

[JavanPoirier]

Description

Icon sizing and styling issue

CodeSandbox/Snack link

none

Steps to reproduce

Updated this ticket to cover more styling issues with button icons. The Icon does not take the configured styling, and only works if specified on the component:

Original related issue:

Related bug: #1821

The workaround is to use a number value as the size on a Icon component. This works to display the icon correctly (granted not supported by the types), one side effect of this is that certain styles applied are omitted with variants. Margin in my case.

I have the following button:

And the following variant:

Without size, the Icon will not render correctly however the margin from the variant is applied. If I add the size, the margin is omitted.

Workaround is the apply the margin in line with the component use. No variant support.

gluestack-ui Version

v2

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

No response

[kuroispd]

Hi.
I found (maybe) same issue on other importing icon components such as InputIcon, CheckboxIcon, and etc...
After init expo server, the screen shows error on index.web.tsx of Icon that const accessClassName returns undefined or null for Object.

[rajat693]

hi @JavanPoirier you can't pass the number value to size prop of Icon component, but if you want to give custom size then you can give height and width in className.

[JavanPoirier]

hi @JavanPoirier you can't pass the number value to size prop of Icon component, but if you want to give custom size then you can give height and width in className.

I understand that a number is not "technically" supported by documentation or the types. However it does actually work across platforms and is the only way to workaround #1821 as I mention in this ticket. I believe this to do with the size prop being passed to the underlying SVG.

Here is the workaround I implemented in the Gluestack UI component:

I have not dug much deeper, however I suspect it is due to size being passed directly to the SVG, while height & width as specified with nativewind only affect the container. Suggesting a possible issue with the SVG viewport?

#1821 only appears with some icons. I know LayoutListIcon & BatteryFullIcon from lucide-react-native were problems for me.