feat: add Carbon icons

libs/shared/lib/assets/carbonIcons/carbonIcons.tsx

+import React from 'react';
+import type { SVGProps } from 'react';
+
+export function CarbonStringInteger(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+      <path
+        fill="currentColor"
+        d="M26 12h-4v2h4v2h-3v2h3v2h-4v2h4a2.003 2.003 0 0 0 2-2v-6a2 2 0 0 0-2-2m-7 10h-6v-4a2 2 0 0 1 2-2h2v-2h-4v-2h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2v2h4zM8 20v-8H6v1H4v2h2v5H4v2h6v-2z"
+      ></path>
+    </svg>
+  );
+}
+
+export function CarbonStringText(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+      <path
+        fill="currentColor"
+        d="M29 22h-5a2.003 2.003 0 0 1-2-2v-6a2 2 0 0 1 2-2h5v2h-5v6h5zM18 12h-4V8h-2v14h6a2.003 2.003 0 0 0 2-2v-6a2 2 0 0 0-2-2m-4 8v-6h4v6zm-6-8H3v2h5v2H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6v-8a2 2 0 0 0-2-2m0 8H4v-2h4z"
+      ></path>
+    </svg>
+  );
+}
+
+export function CarbonCalendar(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+      <path
+        fill="currentColor"
+        d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 22H6V12h20zm0-16H6V6h4v2h2V6h8v2h2V6h4z"
+      ></path>
+    </svg>
+  );
+}
+
+export function CarbonBoolean(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+      <path fill="currentColor" d="M23 23a7 7 0 1 1 7-7a7.01 7.01 0 0 1-7 7m0-12a5 5 0 1 0 5 5a5.006 5.006 0 0 0-5-5"></path>
+      <circle cx={9} cy={16} r={7} fill="currentColor"></circle>
+    </svg>
+  );
+}
+
+export function CarbonUndefined(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 32 32" {...props}>
+      <path fill="currentColor" d="M11 14h10v4H11z"></path>
+      <path
+        fill="currentColor"
+        d="M29.391 14.527L17.473 2.609A2.08 2.08 0 0 0 16 2c-.533 0-1.067.203-1.473.609L2.609 14.527C2.203 14.933 2 15.466 2 16s.203 1.067.609 1.473L14.526 29.39c.407.407.941.61 1.474.61s1.067-.203 1.473-.609L29.39 17.474c.407-.407.61-.94.61-1.474s-.203-1.067-.609-1.473M16 28.036L3.965 16L16 3.964L28.036 16z"
+      ></path>
+    </svg>
+  );
+}

libs/shared/lib/components/CardToolTipVis/index.tsx

 import React from 'react';
 import { Icon } from '@graphpolaris/shared/lib/components/icon';
-import { AbcOutlined, Settings, Numbers } from '@mui/icons-material';
+import { Numbers } from '@mui/icons-material';
 import styles from './cardtooltipvis.module.scss';
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
+import {
+  CarbonStringInteger,
+  CarbonStringText,
+  CarbonCalendar,
+  CarbonBoolean,
+  CarbonUndefined,
+} from '@graphpolaris/shared/lib/assets/carbonIcons/carbonIcons';
 
 export type CardToolTipVisProps = {
   type: string;
@@ -79,7 +86,21 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
                       {type === 'schema' ? (
                         <Icon
                           className="ml-auto text-right"
-                          component={v === 'int' ? <Settings /> : <AbcOutlined />}
+                          component={
+                            v === 'int' || v === 'float' ? (
+                              <CarbonStringInteger />
+                            ) : v === 'string' ? (
+                              <CarbonStringText />
+                            ) : v === 'boolean' ? (
+                              <CarbonBoolean />
+                            ) : v === 'date' ? (
+                              <CarbonCalendar />
+                            ) : v === 'undefined' ? (
+                              <CarbonUndefined />
+                            ) : (
+                              <CarbonUndefined />
+                            )
+                          }
                           color="hsl(var(--clr-sec--400))"
                           size={24}
                         />

libs/shared/lib/components/icon/icon.stories.tsx

 import { StoryObj, Meta } from '@storybook/react';
 import { Icon } from '../icon';
-import { ArrowBack, DeleteOutline, KeyboardArrowLeft, Settings } from '@mui/icons-material';
-
+import { ArrowBack } from '@mui/icons-material';
+import { CarbonStringInteger } from '@graphpolaris/shared/lib/assets/carbonIcons/carbonIcons';
 const Component: Meta<typeof Icon> = {
   title: 'Components/Icon',
   component: Icon,
@@ -21,8 +21,13 @@ const Component: Meta<typeof Icon> = {
 export default Component;
 type Story = StoryObj<typeof Component>;
 
-export const BaseIcon: Story = (args: any) => {
+export const MUIIcon: Story = (args: any) => {
   return <Icon component={<ArrowBack />} size={24} {...args} />;
 };
 
-BaseIcon.args = {};
+export const CarbonIcon: Story = (args: any) => {
+  return <Icon component={<CarbonStringInteger />} size={24} {...args} />;
+};
+
+MUIIcon.args = {};
+CarbonIcon.args = {};

libs/shared/lib/components/icon/index.tsx

-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { SVGProps } from 'react';
 
+// Define Sizes and IconProps types
 export type Sizes = 12 | 14 | 16 | 20 | 24 | 28 | 32 | 40;
 export type IconProps = SVGProps<SVGSVGElement> & {
-  component: ReactElement<any>;
+  component: ReactNode | ReactElement<any>;
   size?: Sizes;
   color?: string;
 };
 
+// Icon component definition
 export const Icon: React.FC<IconProps> = ({ component, size = 24, color, ...props }) => {
   if (!component) {
-    console.error(`No icon found`);
+    console.error('No icon found');
     return <div></div>;
   }
 
-  return React.cloneElement(component, { style: { fontSize: size, color: color }, width: size, height: size, ...props });
+  const style = { fontSize: size, color };
+
+  // Check if component is a valid React element
+  if (React.isValidElement(component)) {
+    return React.cloneElement(component as ReactElement<any>, {
+      style: { ...style, ...(component as ReactElement<any>).props.style },
+      width: size,
+      height: size,
+      ...props,
+    });
+  }
+
+  // Check if component is a function (assume it's a custom SVG component)
+  if (typeof component === 'function') {
+    // Render the custom SVG component directly
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 32 32" style={style} {...props}>
+        {(component as () => ReactNode)()}
+      </svg>
+    );
+  }
+
+  // Default case: render null or fallback
+  console.error('Unsupported icon type');
+  return null;
 };