Add style prop on BorderedIcon component

swan-io · Dec 6, 2023 · 846842b · 846842b
1 parent a4af00f
commit 846842b
Showing 1 changed file with 19 additions and 22 deletions.
diff --git a/packages/lake/src/components/BorderedIcon.tsx b/packages/lake/src/components/BorderedIcon.tsx
@@ -1,5 +1,5 @@
-import { StyleSheet } from "react-native";
-import { colors, ColorVariants, Radii, radii } from "../constants/design";
+import { StyleSheet, ViewProps } from "react-native";
+import { ColorVariants, Radii, colors, radii } from "../constants/design";
 import { Box } from "./Box";
 import { Icon, IconName } from "./Icon";
 import { SpacingValue } from "./Space";
@@ -14,36 +14,33 @@ const styles = StyleSheet.create({
 
 type Props = {
   name: IconName;
-  size?: number;
-  padding?: SpacingValue | 0;
-  color?: ColorVariants;
   borderRadius?: Radii;
+  color?: ColorVariants;
+  padding?: SpacingValue | 0;
+  size?: number;
+  style?: ViewProps["style"];
 };
 
 export const BorderedIcon = ({
   name,
-  size = 96,
-  padding = 0,
-  color = "current",
   borderRadius = 8,
+  color = "current",
+  padding = 0,
+  size = 96,
+  style,
 }: Props) => {
   const iconSize = size - padding * 2;
 
+  const boxStyle = {
+    backgroundColor: colors[color][50],
+    borderColor: colors[color][100],
+    borderRadius: radii[borderRadius],
+    width: size,
+    height: size,
+  };
+
   return (
-    <Box
-      alignItems="center"
-      justifyContent="center"
-      style={[
-        styles.base,
-        {
-          width: size,
-          height: size,
-          borderColor: colors[color][100],
-          backgroundColor: colors[color][50],
-          borderRadius: radii[borderRadius],
-        },
-      ]}
-    >
+    <Box alignItems="center" justifyContent="center" style={[styles.base, boxStyle, style]}>
       <Icon name={name} size={iconSize} color={colors[color][500]} />
     </Box>
   );