refactor: move @/ui/display/icon to twenty-ui (#4820)

Split from https://github.com/twentyhq/twenty/pull/4518

Part of https://github.com/twentyhq/twenty/issues/4766

packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@emotion/react';
+
+import IconAddressBookRaw from '@ui/display/icon/assets/address-book.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconAddressBookProps = Pick<IconComponentProps, 'size' | 'stroke'>;
+
+export const IconAddressBook = (props: IconAddressBookProps) => {
+  const theme = useTheme();
+  const size = props.size ?? 24;
+  const stroke = props.stroke ?? theme.icon.stroke.md;
+
+  return <IconAddressBookRaw height={size} width={size} strokeWidth={stroke} />;
+};

packages/twenty-ui/src/display/icon/components/IconGmail.tsx

@@ -0,0 +1,13 @@
+import { useTheme } from '@emotion/react';
+
+import IconGmailRaw from '@ui/display/icon/assets/gmail.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconGmailProps = Pick<IconComponentProps, 'size'>;
+
+export const IconGmail = (props: IconGmailProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return <IconGmailRaw height={size} width={size} />;
+};

packages/twenty-ui/src/display/icon/components/IconGoogle.tsx

@@ -0,0 +1,13 @@
+import { useTheme } from '@emotion/react';
+
+import IconGoogleRaw from '@ui/display/icon/assets/google.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconGoogleProps = Pick<IconComponentProps, 'size'>;
+
+export const IconGoogle = (props: IconGoogleProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return <IconGoogleRaw height={size} width={size} />;
+};

packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx

@@ -0,0 +1,13 @@
+import { useTheme } from '@emotion/react';
+
+import IconGoogleCalendarRaw from '@ui/display/icon/assets/google-calendar.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconGoogleCalendarProps = Pick<IconComponentProps, 'size'>;
+
+export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return <IconGoogleCalendarRaw height={size} width={size} />;
+};

packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@emotion/react';
+
+import IconTwentyStarRaw from '@ui/display/icon/assets/twenty-star.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconTwentyStarProps = Pick<IconComponentProps, 'size' | 'stroke'>;
+
+export const IconTwentyStar = (props: IconTwentyStarProps) => {
+  const theme = useTheme();
+  const size = props.size ?? 24;
+  const stroke = props.stroke ?? theme.icon.stroke.md;
+
+  return <IconTwentyStarRaw height={size} width={size} strokeWidth={stroke} />;
+};

packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx

@@ -0,0 +1,16 @@
+import { useTheme } from '@emotion/react';
+
+import IconTwentyStarFilledRaw from '@ui/display/icon/assets/twenty-star-filled.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconTwentyStarFilledProps = Pick<IconComponentProps, 'size' | 'stroke'>;
+
+export const IconTwentyStarFilled = (props: IconTwentyStarFilledProps) => {
+  const theme = useTheme();
+  const size = props.size ?? 24;
+  const stroke = props.stroke ?? theme.icon.stroke.md;
+
+  return (
+    <IconTwentyStarFilledRaw height={size} width={size} strokeWidth={stroke} />
+  );
+};