feat(FR-369): Add icon components for Neo design (#3223)

resolves #3033 (FR-369)
<!-- replace NNN, MMM with the GitHub issue number and the corresponding Jira issue number. -->

Add an Icon component for Neo Webui. Componentise the icons within the Pygma design file.

**How to test:**
- Verify that colours, font size, etc. are applied correctly with inline css.
- Check for missing icons or duplicates.

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

react/src/components/BAIIcons/AppIcon.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './App.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface AppIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const AppIcon: React.FC<AppIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default AppIcon;

react/src/components/BAIIcons/CalculateResourceIcon.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './CalculateResource.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface CalculateResourceIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const CalculateResourceIcon: React.FC<CalculateResourceIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default CalculateResourceIcon;

react/src/components/BAIIcons/ContainerCommitIcon.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './ContainerCommit.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ContainerCommitIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const ContainerCommitIcon: React.FC<ContainerCommitIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default ContainerCommitIcon;

react/src/components/BAIIcons/DashboardIcon.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './Dashboard.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface DashboardIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const DashboardIcon: React.FC<DashboardIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default DashboardIcon;

react/src/components/BAIIcons/EndpointIcon.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './Endpoint.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface EndpointProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const Endpoint: React.FC<EndpointProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default Endpoint;

react/src/components/BAIIcons/ListIcon.tsx

@@ -0,0 +1,12 @@
+import { ReactComponent as logo } from './List.svg';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface ListIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}
+
+const ListIcon: React.FC<ListIconProps> = (props) => {
+  return <Icon component={logo} {...props} />;
+};
+
+export default ListIcon;