feat(components/icon): add component, add to example, add to doc, add…

apps/docs/pages/docs/v2/Components/icon.en-US.mdx

@@ -0,0 +1,78 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+import PropsTable from "@components/docs/props-table";
+
+# Icon
+
+Component to display icon, it's a wrapper around the `Icon` component from `react-native-vector-icons` library.
+
+## Import
+
+```js
+import { Icon } from "@ficus-ui/native";
+```
+
+## Usage
+
+### Examples
+
+<CodeEditor code={`<HStack spacing={10}>
+  <Icon name="like1" color="blue.700" fontSize="6xl" />
+  <Icon
+    name="star"
+    color="yellow.700"
+    fontSize="6xl"
+    fontFamily="FontAwesome"
+  />
+  <Icon name="codesquare" color="red.500" fontSize="6xl" />
+  <Icon name="android1" color="teal.500" fontSize="6xl" />
+  <Icon name="heart" color="red.500" fontSize="6xl" />
+  <Icon name="apple1" color="blue.700" fontSize="6xl" />
+  <Icon name="appstore1" color="teal.500" fontSize="6xl" />
+  <Icon name="slack" color="yellow.700" fontSize="6xl" />
+</HStack>`} />
+
+### Custom style
+
+<CodeEditor code={`<Icon
+  bg="yellow.400"
+  p={15}
+  borderRadius="full"
+  name="star"
+  color="yellow.700"
+  fontSize="2xl"
+  fontFamily="FontAwesome"
+  h={50}
+  w={50}
+/>`} />
+
+## Props
+
+Extends every `Box`
+
+### `name`
+<PropsTable
+  description="The name property (`name` style prop in StyleSheet)."
+  prop={{ type: "string", required: true }}
+/>
+
+### `color`
+<PropsTable
+  description="The color property (`color` style prop in StyleSheet)."
+  prop={{ type: "string", required: false, defaultValue: "gray.800" }}
+/>
+
+### `size`
+<PropsTable
+  description="The size property (`fontSize` style prop in StyleSheet)."
+  prop={{ type: "string, number", required: false }}
+/>
+
+### `iconSet`
+<PropsTable
+  description="The iconSet to use for the Icon"
+  prop={{ type: "string", required: false, defaultValue: "Ionicons" }}
+/>

apps/examples/app/components-v2/Icon.tsx

@@ -0,0 +1,49 @@
+import ExampleSection from "@/src/ExampleSection";
+import { HStack, Icon, SafeAreaBox, ScrollBox, Text } from "@ficus-ui/native";
+
+
+const IconComponent = () => {
+  return (
+    <SafeAreaBox>
+      <Text mx="xl" fontSize="4xl">
+        Icon component
+      </Text>
+      <ScrollBox>
+        <ExampleSection name="default">
+          <HStack spacing={10}>
+            <Icon name="accessibility" color="blue.700" size="6xl" iconSet="Ionicons" />
+            <Icon
+              name="star"
+              color="yellow.700"
+              size="6xl"
+              iconSet="Ionicons"
+            />
+          </HStack>
+        </ExampleSection>
+        <ExampleSection name="sizes">
+          <HStack spacing={10}>
+            <Icon name="alarm" color="red.500" size="md"  />
+            <Icon name="analytics" color="teal.500" size="xl" />
+            <Icon name="heart" color="red.500" size="2xl" />
+            <Icon name="brush" color="blue.700" size="6xl" />
+          </HStack>
+        </ExampleSection>
+        <ExampleSection name="back button">
+          <HStack spacing={10}>
+            <Icon
+              bg="yellow.400"
+              p={15}
+              borderRadius="full"
+              name="arrow-back"
+              color="yellow.700"
+              size="2xl"
+              iconSet="Ionicons"
+            />
+          </HStack>
+        </ExampleSection>
+      </ScrollBox>
+    </SafeAreaBox>
+  );
+};
+
+export default IconComponent;

apps/examples/app/items-v2.ts

@@ -15,6 +15,7 @@ import PressableComponent from './components-v2/Pressable';
 import DividerComponent from '@/app/components-v2/Divider';
 import SpinnerComponent from '@/app/components-v2/Spinner';
 import SliderComponent from '@/app/components-v2/Slider';
+import IconComponent from '@/app/components-v2/Icon';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -39,4 +40,5 @@ export const components: ExampleComponentType[] = [
   { navigationPath: 'Spinner', onScreenName: 'Spinner', component: SpinnerComponent },
   { navigationPath: 'Pressable', onScreenName: 'Pressable', component: PressableComponent },
   { navigationPath: 'Slider', onScreenName: 'Slider', component: SliderComponent },
+  { navigationPath: 'Icon', onScreenName: 'Icon', component: IconComponent },
 ];

packages/components/src/icon/icon.service.tsx

@@ -0,0 +1,37 @@
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import IconEntypo from 'react-native-vector-icons/Entypo';
+import IconEvilIcons from 'react-native-vector-icons/EvilIcons';
+import IconFeather from 'react-native-vector-icons/Feather';
+import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
+import IconFontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import IconFontisto from 'react-native-vector-icons/Fontisto';
+import IconFoundation from 'react-native-vector-icons/Foundation';
+import IconIonicons from 'react-native-vector-icons/Ionicons';
+import IconMaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import IconMaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import IconOcticons from 'react-native-vector-icons/Octicons';
+import IconSimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
+import IconZocial from 'react-native-vector-icons/Zocial';
+
+const iconSetMap = {
+  AntDesign: IconAntDesign,
+  Entypo: IconEntypo,
+  EvilIcons: IconEvilIcons,
+  Feather: IconFeather,
+  FontAwesome: IconFontAwesome,
+  FontAwesome5: IconFontAwesome5,
+  Foundation: IconFoundation,
+  Ionicons: IconIonicons,
+  MaterialIcons: IconMaterialIcons,
+  MaterialCommunityIcons: IconMaterialCommunityIcons,
+  Octicons: IconOcticons,
+  Zocial: IconZocial,
+  Fontisto: IconFontisto,
+  SimpleLineIcons: IconSimpleLineIcons,
+} as const;
+
+export type IconSet = keyof typeof iconSetMap;
+
+export const getIconSet = (iconSet: IconSet = 'Ionicons') => {
+  return iconSetMap[iconSet];
+};

packages/components/src/icon/icon.spec.tsx

@@ -0,0 +1,63 @@
+import { theme } from '@ficus-ui/theme';
+import { renderWithTheme as render } from '@test-utils';
+
+import { Icon } from '.';
+import { getIconSet } from './icon.service';
+
+jest.mock('./icon.service', () => ({
+  getIconSet: jest.fn(() => jest.fn(() => null)), // Mock the icon component
+}));
+
+describe('Icon component', () => {
+  it('should render default icon with no props', () => {
+    const { getByTestId } = render(<Icon testID="icon-no-props" name="home" />);
+
+    expect(getIconSet).toHaveBeenCalled();
+    expect(getByTestId('icon-no-props')).toBeTruthy();
+  });
+
+  it('should apply color from theme', () => {
+    const { getByTestId } = render(
+      <Icon testID="icon-color" name="home" color="blue.500" />
+    );
+
+    expect(getByTestId('icon-color').props.children.props.color).toBe(
+      theme.colors.blue[500]
+    );
+  });
+
+  it('should apply font size from theme', () => {
+    const { getByTestId } = render(
+      <Icon
+        testID="icon-size"
+        name="accessibility"
+        color="blue.700"
+        size="6xl"
+        iconSet="Ionicons"
+      />
+    );
+    expect(getByTestId('icon-size').props.children.props.size).toBe(
+      theme.fontSizes['6xl']
+    );
+  });
+
+  it('should use the correct icon set based on fontFamily', () => {
+    render(<Icon testID="icon-font" name="home" iconSet="Feather" />);
+
+    expect(getIconSet).toHaveBeenCalledWith('Feather');
+  });
+
+  it('should pass additional props correctly', () => {
+    const { getByTestId } = render(
+      <Icon
+        testID="icon-custom"
+        name="settings"
+        accessibilityLabel="Settings Icon"
+      />
+    );
+
+    expect(getByTestId('icon-custom').props.accessibilityLabel).toBe(
+      'Settings Icon'
+    );
+  });
+});

packages/components/src/icon/index.tsx

@@ -0,0 +1,27 @@
+import { getColor, getProperty, theme } from '@ficus-ui/theme';
+
+import { type NativeFicusProps, ficus, forwardRef } from '../system';
+import { type IconSet, getIconSet } from './icon.service';
+
+interface IconOptions {
+  name: string;
+  color?: string;
+  size?: string;
+  iconSet?: IconSet;
+}
+
+export interface IconProps extends NativeFicusProps<'View'>, IconOptions {}
+
+export const Icon = forwardRef<IconProps, 'View'>(function Badge(props, ref) {
+  const { name, iconSet, color = 'gray.800', size, ...rest } = props;
+  const IconComponent = getIconSet(iconSet);
+  return (
+    <ficus.View ref={ref} {...rest}>
+      <IconComponent
+        color={getColor(color, theme.colors)}
+        size={getProperty(size, theme.fontSizes)}
+        name={name}
+      />
+    </ficus.View>
+  );
+});

packages/components/src/index.ts

@@ -12,5 +12,6 @@ export * from './pressable';
 export * from './divider';
 export * from './spinner';
 export * from './slider';
+export * from './icon';
 
 export { ThemeProvider } from '@ficus-ui/theme';

packages/components/src/slider/slider.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { renderWithTheme as render } from '@test-utils';
+import { fireEvent } from '@testing-library/react-native';
 
 import { Slider } from '.';