refactor: move @/ui/display/icon to twenty-ui

Part of #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-front/src/modules/ui/display/icon/components/IconGmail.tsx → packages/twenty-ui/src/display/icon/components/IconGmail.tsx

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

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

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

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

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

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} />
+  );
+};

packages/twenty-front/src/modules/ui/display/icon/hooks/__tests__/useIcons.test.ts → packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts

@@ -1,8 +1,12 @@
 import { renderHook } from '@testing-library/react';
 import * as recoil from 'recoil';
-import { Icon123, IconBuildingSkyscraper, IconUser } from 'twenty-ui';
 
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
+import {
+  Icon123,
+  IconBuildingSkyscraper,
+  IconUser,
+} from '@ui/display/icon/components/TablerIcons';
+import { useIcons } from '@ui/display/icon/hooks/useIcons';
 
 describe('useIcons', () => {
   const mockedStateIcons = {

packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts → packages/twenty-ui/src/display/icon/hooks/useIcons.ts

@@ -1,7 +1,7 @@
 import { useRecoilValue } from 'recoil';
-import { Icon123 } from 'twenty-ui';
 
-import { iconsState } from '@/ui/display/icon/states/iconsState';
+import { Icon123 } from '@ui/display/icon/components/TablerIcons';
+import { iconsState } from '@ui/display/icon/states/iconsState';
 
 export const useIcons = () => {
   const icons = useRecoilValue(iconsState);

packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx → packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
-import { iconsState } from '@/ui/display/icon/states/iconsState';
+import { iconsState } from '@ui/display/icon/states/iconsState';
 
 type IconsProviderProps = {
   children: JSX.Element;
@@ -11,8 +11,8 @@ export const IconsProvider = ({ children }: IconsProviderProps) => {
   const setIcons = useSetRecoilState(iconsState);
 
   useEffect(() => {
-    import('../constants/index').then((lazyLoadedIcons) => {
-      setIcons(lazyLoadedIcons.default);
+    import('./internal/AllIcons').then((lazyLoadedIcons) => {
+      setIcons(lazyLoadedIcons);
     });
   }, [setIcons]);