Icon component in Android (#2707)

* IconTests

* Change files

* fixPipeline

* fixPrettier

---------

Co-authored-by: Ankita Raj <ankraj@microsoft.com>

apps/E2E/src/IconV1/specs/IconV1.spec.android.ts

@@ -0,0 +1,14 @@
+import IconV1PageObject from '../pages/IconV1PageObject';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('IconV1 Testing Initialization', () => {
+  it('Wait for app load', async () => {
+    await IconV1PageObject.waitForInitialPageToDisplay();
+    expect(await IconV1PageObject.isInitialPageDisplayed()).toBeTruthy(IconV1PageObject.ERRORMESSAGE_APPLOAD);
+  });
+
+  it('Click and navigate to IconV1 test page', async () => {
+    await IconV1PageObject.navigateToPageAndLoadTests();
+    expect(await IconV1PageObject.isPageLoaded()).toBeTruthy(IconV1PageObject.ERRORMESSAGE_PAGELOAD);
+  });
+});

apps/fluent-tester/src/TestComponents/Icon/IconTest.tsx

@@ -7,8 +7,8 @@ import type { RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluentu
 import { Icon } from '@fluentui-react-native/icon';
 
 import { E2ETestingIcon } from './IconLegacyE2ETest';
-import { IconV1Test } from './IconV1';
 import { IconV1E2ETest } from './IconV1E2ETest';
+import { IconV1Test } from './IconV1Test';
 import { ICON_TESTPAGE } from '../../../../E2E/src/IconLegacy/consts';
 import { testImage, testTtf, svgProps } from '../Common/iconExamples';
 import type { TestSection, PlatformStatus } from '../Test';
@@ -93,17 +93,23 @@ const Icons: React.FunctionComponent = () => {
 };
 
 const iconSections: TestSection[] = [
-  {
-    name: 'Icon',
-    testID: ICON_TESTPAGE,
-    component: Icons,
-  },
+  ...Platform.select({
+    android: [null],
+    default: [
+      {
+        name: 'Icon',
+        testID: ICON_TESTPAGE,
+        component: Icons,
+      },
+    ],
+  }),
   {
     name: 'Icon for E2E Testing',
     component: E2ETestingIcon,
   },
   {
     name: 'Default Icon',
+    testID: ICON_TESTPAGE,
     component: IconV1Test,
   },
 ];
@@ -121,7 +127,7 @@ export const IconTest: React.FunctionComponent = () => {
     uwpStatus: 'Backlog',
     iosStatus: 'Experimental',
     macosStatus: 'Experimental',
-    androidStatus: 'Backlog',
+    androidStatus: 'Experimental',
   };
 
   const description = 'Icons are styled images that can be fonts, svgs, or bitmaps';

apps/fluent-tester/src/TestComponents/Icon/IconV1Test android.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+
+import type { FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon';
+import { FontIcon, SvgIcon, IconV1 } from '@fluentui-react-native/icon';
+
+import TestSvg from '../../../assets/test.svg';
+
+const fontBuiltInProps: FontIconPropsV1 = {
+  fontFamily: 'Arial',
+  codepoint: 0x2663,
+  fontSize: 100,
+  color: '#f09',
+};
+
+const svgUriProps: SvgIconPropsV1 = {
+  uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d0/Drawsvgbird.svg',
+  viewBox: '0 0 1000 1000',
+  width: 100,
+  height: 100,
+};
+
+const svgSrcProps: SvgIconPropsV1 = {
+  viewBox: '0 0 500 500',
+  src: TestSvg,
+};
+
+export const IconV1Test: React.FunctionComponent = () => {
+  const svgSource = useMemo(
+    () => ({
+      color: 'lightgreen',
+      width: 72,
+      height: 72,
+      ...svgSrcProps,
+    }),
+    [],
+  );
+  const fontSource = useMemo(
+    () => ({
+      ...fontBuiltInProps,
+      color: 'lightskyblue',
+    }),
+    [],
+  );
+
+  return (
+    <View>
+      <Text>Icon component</Text>
+      <IconV1 svgSource={svgSrcProps} color="red" size={16} />
+      <IconV1 svgSource={svgSrcProps} color="blue" size={40} />
+      <IconV1 svgSource={svgSource} />
+
+      <IconV1 svgSource={svgUriProps} />
+
+      <IconV1 fontSource={fontSource} color="red" />
+
+      <Text>SVG</Text>
+      <SvgIcon color="green" {...svgSrcProps} width={48} height={48} />
+
+      <Text>FontIcon</Text>
+      <FontIcon {...fontBuiltInProps} />
+    </View>
+  );
+};

change/@fluentui-react-native-e2e-testing-78a2d18f-37ac-40cd-bf59-247d1b286716.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "IconTests",
+  "packageName": "@fluentui-react-native/e2e-testing",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-icon-96f2657b-9648-459d-abea-a58c63cc47ee.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "IconTests",
+  "packageName": "@fluentui-react-native/icon",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-b1ea3e3a-1b6c-4463-b20d-ff4200664354.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "IconTests",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

packages/components/Icon/SPEC.md

@@ -103,7 +103,7 @@ export interface IconProps {
 ## SVG Icon
 
 Svg Icon can be rendered using `src` prop or `uri` prop.
-When passing `src` then [react-native-svg-transfoprmer](https://github.com/kristerkari/react-native-svg-transformer) should be installed and configured.
+When passing `src` then [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer) should be installed and configured.
 
 ### Props