feat: icon component wraps all icons in app

mobile/app/(app)/(tabs)/_layout.tsx

@@ -1,13 +1,9 @@
 import React from "react";
 import { Tabs } from "expo-router";
-import ObservationSVG from "../../../assets/icons/observation.svg";
-import QuickReportSVG from "../../../assets/icons/quick-report.svg";
-import GuidesSVG from "../../../assets/icons/Learning.svg";
-import InboxSVG from "../../../assets/icons/Inbox.svg";
-import MoreSVG from "../../../assets/icons/More.svg";
 import { TextStyle, ViewStyle } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "tamagui";
+import { Icon } from "../../../components/Icon";
 
 export default function TabLayout() {
   const insets = useSafeAreaInsets();
@@ -27,35 +23,35 @@ export default function TabLayout() {
         name="index"
         options={{
           title: "Observation",
-          tabBarIcon: ({ color }) => <ObservationSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="eyeOff" color={color} />,
         }}
       />
       <Tabs.Screen
         name="quick-report"
         options={{
           title: "Quick Report",
-          tabBarIcon: ({ color }) => <QuickReportSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="quickReport" color={color} />,
         }}
       />
       <Tabs.Screen
         name="guides"
         options={{
           title: "Guides",
-          tabBarIcon: ({ color }) => <GuidesSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="learning" color={color} />,
         }}
       />
       <Tabs.Screen
         name="inbox"
         options={{
           title: "Inbox",
-          tabBarIcon: ({ color }) => <InboxSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="inbox" color={color} />,
         }}
       />
       <Tabs.Screen
         name="more"
         options={{
           title: "More",
-          tabBarIcon: ({ color }) => <MoreSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="more" color={color} />,
         }}
       />
     </Tabs>

mobile/app/(app)/(tabs)/index.tsx

@@ -1,13 +1,20 @@
 import { View, Text } from "react-native";
 import { useAuth } from "../../../hooks/useAuth";
 import OfflinePersistComponentExample from "../../../components/OfflinePersistComponentExample";
+import { Icon } from "../../../components/Icon";
 
 const Index = () => {
   const { signOut } = useAuth();
 
   return (
     <View style={{ gap: 20 }}>
       <Text>Observation</Text>
+      <Icon
+        icon="eyeOff"
+        size={24}
+        color="$purple5"
+        backgroundColor="$yellow2"
+      />
       <OfflinePersistComponentExample></OfflinePersistComponentExample>
       <Text onPress={signOut}>Logout</Text>
     </View>

mobile/components/Icon.tsx

@@ -0,0 +1,163 @@
+import * as React from "react";
+import EyeOff from "../assets/icons/Eye off.svg";
+import Eye from "../assets/icons/Eye.svg";
+import Observation from "../assets/icons/observation.svg";
+import QuickReport from "../assets/icons/quick-report.svg";
+import Learning from "../assets/icons/Learning.svg";
+import Inbox from "../assets/icons/Inbox.svg";
+import More from "../assets/icons/More.svg";
+import ChevronRight from "../assets/icons/Chevron right.svg";
+import ChevronLeft from "../assets/icons/Chevron left.svg";
+import AddNote from "../assets/icons/add-note.svg";
+import Trash from "../assets/icons/Trash.svg";
+import Logout from "../assets/icons/logout.svg";
+import PencilAlt from "../assets/icons/Pencil alt.svg";
+import XCircle from "../assets/icons/x-circle.svg";
+import MenuAlt2 from "../assets/icons/menu-alt-2.svg";
+import DotsVertical from "../assets/icons/dots-vertical.svg";
+
+import { styled } from "tamagui";
+import { View } from "tamagui";
+import { StyleProp, ViewStyle } from "react-native";
+
+interface IconProps {
+  /**
+   * The name of the icon
+   */
+  icon: string;
+
+  /**
+   * An optional tint color for the icon
+   */
+  color?: string;
+
+  /**
+   * An optional size for the icon. If not provided, the icon will be sized to the icon's resolution.
+   */
+  size?: number;
+
+  /**
+   * Style overrides for the view container
+   */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A component to render a registered icon.
+ * It is wrapped in a <TouchableOpacity /> if `onPress` is provided, otherwise a <View />.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/components/Icon/}
+ * @param {IconProps} props - The props for the `Icon` component.
+ * @returns {JSX.Element} The rendered `Icon` component.
+ */
+
+type IconRegistry = {
+  [key: string]: React.ReactNode;
+};
+
+export const defaultIcon = (props: IconProps) => {
+  const {
+    icon,
+    color,
+    size,
+    style: $viewStyleOverride,
+    ...tamaguiProps
+  } = props;
+
+  const iconRegistry: IconRegistry = {
+    eyeOff: (
+      <EyeOff fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    eye: <Eye fill={color || "black"} width={size || 24} height={size || 24} />,
+    observation: (
+      <Observation
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+
+    quickReport: (
+      <QuickReport
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    learning: (
+      <Learning
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    inbox: (
+      <Inbox fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    more: (
+      <More fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    chevronRight: (
+      <ChevronRight
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    chevronLeft: (
+      <ChevronLeft
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    addNote: (
+      <AddNote fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    trash: (
+      <Trash fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    logout: (
+      <Logout fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    pencilAlt: (
+      <PencilAlt
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    xCircle: (
+      <XCircle fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    menuAlt2: (
+      <MenuAlt2
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    dotsVertical: (
+      <DotsVertical
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+  };
+
+  return (
+    <View {...tamaguiProps} style={$viewStyleOverride}>
+      {iconRegistry[icon]}
+    </View>
+  );
+};
+
+export const Icon = styled(
+  defaultIcon,
+  {},
+  {
+    accept: {
+      color: "color",
+    },
+  }
+);