Revert "Fix icons getting cut off (#764)"

This reverts commit d015929.

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]}
+      style={[styles.container, style, { width: size, height: size }]}
     >
       <Icon
         style={styles.icon}

packages/core/src/components/IconButton.tsx

@@ -52,6 +52,8 @@ 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

@@ -6,7 +6,6 @@ import {
   StyleProp,
   ImageStyle,
   Platform,
-  LayoutChangeEvent,
 } from "react-native";
 
 // This must use require to work in both web as a published project and in Snack
@@ -26,16 +25,6 @@ const Icon: React.FC<React.PropsWithChildren<Props>> = ({
   style,
   ...rest
 }) => {
-  const [calculatedIconWidth, setCalculatedIconWidth] =
-    React.useState<number>();
-  const [calculatedIconHeight, setCalculatedIconHeight] =
-    React.useState<number>();
-
-  React.useEffect(() => {
-    setCalculatedIconWidth(undefined);
-    setCalculatedIconHeight(undefined);
-  }, [name]);
-
   if (!name) return null;
 
   let iconSet = "MaterialIcons";
@@ -46,26 +35,8 @@ const Icon: React.FC<React.PropsWithChildren<Props>> = ({
   const IconSet = VectorIcons[iconSet];
 
   return (
-    <View
-      style={[
-        styles.container,
-        calculatedIconWidth && calculatedIconHeight
-          ? { width: calculatedIconWidth, height: calculatedIconHeight }
-          : {},
-        style,
-      ]}
-    >
-      <IconSet
-        {...rest}
-        onLayout={(e: LayoutChangeEvent) => {
-          const layout = e.nativeEvent.layout;
-          setCalculatedIconWidth(layout.width);
-          setCalculatedIconHeight(layout.height);
-        }}
-        name={name}
-        color={color}
-        size={size}
-      />
+    <View style={[styles.container, { width: size, height: size }, style]}>
+      <IconSet {...rest} name={name} color={color} size={size} />
     </View>
   );
 };