Fix icons from being cut off/clipped (#750)

Author: YoussefHenna

packages/core/src/components/Checkbox/Checkbox.tsx

@@ -92,7 +92,7 @@ const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
       accessibilityState={{ disabled }}
       accessibilityRole="button"
       accessibilityLiveRegion="polite"
-      style={[styles.container, style, { width: size, height: size }]}
+      style={[styles.container, style]}
     >
       <Icon
         style={styles.icon}

packages/core/src/components/IconButton.tsx

@@ -52,8 +52,6 @@ const IconButton: React.FC<React.PropsWithChildren<Props>> = ({
           styles.container,
           {
             opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
-            width: size,
-            height: size,
             alignItems: "center",
             justifyContent: "center",
           },

packages/native/src/components/Icon.tsx

@@ -1,12 +1,5 @@
 import * as React from "react";
-import {
-  View,
-  StyleSheet,
-  ViewProps,
-  StyleProp,
-  ImageStyle,
-  Platform,
-} from "react-native";
+import { ViewProps, StyleProp, ImageStyle, Platform } from "react-native";
 
 // This must use require to work in both web as a published project and in Snack
 const VectorIcons = require("@expo/vector-icons");
@@ -35,24 +28,25 @@ const Icon: React.FC<React.PropsWithChildren<Props>> = ({
   const IconSet = VectorIcons[iconSet];
 
   return (
-    <View style={[styles.container, { width: size, height: size }, style]}>
-      <IconSet {...rest} name={name} color={color} size={size} />
-    </View>
+    <IconSet
+      {...rest}
+      name={name}
+      color={color}
+      size={size}
+      style={[
+        {
+          ...Platform.select({
+            web: {
+              cursor: "pointer",
+              userSelect: "none",
+            },
+          }),
+        },
+        ,
+        style,
+      ]}
+    />
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-    ...Platform.select({
-      web: {
-        cursor: "pointer",
-        userSelect: "none",
-      },
-    }),
-  },
-});
-
 export default Icon;