Icons components with Lucide and rect shape doesn't display correctly on web

[Ocleos]

Description

When we use a lucide icon with a rect shape inside (ex : Cpu, Lock, Shapes, ...) in the "as" prop of the Icon component, the icon isn't displayed correctly on web platform.

CodeSandbox/Snack link

No response

Steps to reproduce

Exemple to reproduce the issue :

import { HStack, Icon } from '@gluestack-ui/themed';
import { Cpu, Shapes, Wrench } from 'lucide-react-native';

const IconsComponent: React.FC = () => {

  return (
    <HStack gap='$2'>
      <Icon as={Shapes} size='xl' color='$white' />
      <Shapes size={24} color='#FFFFFF' />
      <Icon as={Cpu} size='xl' color='$white' />
      <Cpu size={24} color='#FFFFFF' />
      <Icon as={Wrench} size='xl' color='$white' />
      <Wrench size={24} color='#FFFFFF' />
    </HStack>
  );
};

export default IconsComponent;

gluestack-ui Version

1.1.8

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [X] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

Observations

• No issue on Android (didn't test on iOS)
• Width & Height from the size (here 24px on example) are set on the rect shape of the svg and override original value

Dependencies Versions

• "@gluestack-style/react": "^1.0.48"
• "@gluestack-ui/config": "^1.1.5"
• "@gluestack-ui/themed": "^1.1.8"
• "expo": "~50.0.7"
• "lucide-react-native": "^0.335.0"
• "react": "18.2.0"
• "react-dom": "18.2.0"
• "react-native": "0.73.4"
• "react-native-svg": "14.1.0"
• "react-native-web": "~0.19.9"

[akash3gtm]

hi @Ocleos thank you for reporting, we are looking into it.

[akash3gtm]

hi @Ocleos , Issue has been found, will be resolved in the next update and will comment here also.

[akash3gtm]

hi @Ocleos For now, please use the numerical values only. It will be fixed in the next update.

[Jelmerovereem]

When will this be fixed? And is there a workaround for now?