feat(design-system,web): Move icons (#5677)

* feat: Add react-icons

* docs: Deprecate all the things!

* refactor: Move icons export to `@novu/novui/icons`

apps/web/src/components/layout/components/v2/HeaderNav.tsx

@@ -1,6 +1,7 @@
 import { ActionIcon, Header } from '@mantine/core';
 
-import { IconHelpOutline, Tooltip } from '@novu/design-system';
+import { IconHelpOutline } from '@novu/novui/icons';
+import { Tooltip } from '@novu/design-system';
 import { IS_DOCKER_HOSTED } from '../../../../config';
 import { useBootIntercom } from '../../../../hooks';
 import useThemeChange from '../../../../hooks/useThemeChange';

apps/web/src/hooks/useThemeChange.tsx

@@ -1,5 +1,5 @@
 import { ColorScheme, useMantineColorScheme } from '@mantine/core';
-import { IconDarkMode, IconLightMode, IconTonality } from '@novu/design-system';
+import { IconOutlineDarkMode, IconOutlineLightMode, IconOutlineTonality } from '@novu/novui/icons';
 import { ColorSchemePreferenceEnum, THEME_TITLE_LOOKUP, useLocalThemePreference, useSegment } from '@novu/shared-web';
 import { useEffect, useMemo } from 'react';
 import { useDebounce } from './useDebounce';
@@ -8,13 +8,13 @@ type ThemeChange = { colorScheme: ColorScheme; themeStatus: ColorSchemePreferenc
 
 const getThemeIcon = (themeStatus: ColorSchemePreferenceEnum) => {
   if (themeStatus === ColorSchemePreferenceEnum.DARK) {
-    return <IconDarkMode />;
+    return <IconOutlineDarkMode />;
   }
   if (themeStatus === ColorSchemePreferenceEnum.LIGHT) {
-    return <IconLightMode />;
+    return <IconOutlineLightMode />;
   }
 
-  return <IconTonality />;
+  return <IconOutlineTonality />;
 };
 
 export default function useThemeChange() {

libs/design-system/src/iconsV2/Icon.types.ts

@@ -1,28 +1,44 @@
 import { CSSProperties, SVGAttributes } from 'react';
 
-/** Icon Size in pixels (to be replaced with values directly from Design System) */
+/**
+ * @deprecated Use @novu/novui/icons instead.
+ * Icon Size in pixels (to be replaced with values directly from Design System)
+ */
 export type IconSize = '16' | '20' | '24';
 
-/** A temporary type that accepts a typical CSS color until we have our strict Design System types defined */
+/**
+ * @deprecated Use @novu/novui/icons instead.
+ * A temporary type that accepts a typical CSS color until we have our strict Design System types defined
+ */
 type UnsafeIconColor = CSSProperties['color'];
 
+/** @deprecated Use @novu/novui/icons instead. */
 export interface IIconStyleProps {
   /**
+   *
+   * @deprecated Use @novu/novui/icons instead.
    * Default: '20px'.
    *
    * The actual display size in pixels.
    */
   size?: IconSize;
   /**
+   *
+   * @deprecated Use @novu/novui/icons instead.
    * Default: B60
    *
    * WARNING: this is only to be used with colors from the design system, and will later be enforced more strictly
    */
   color?: UnsafeIconColor;
 }
 
+/** @deprecated Use @novu/novui/icons instead. */
 export interface IIconProps extends Omit<SVGAttributes<SVGElement>, 'color'>, IIconStyleProps {
-  /** Description for accessibility. This is mandatory so that we make a11y a priority with icons */
+  /**
+   * Description for accessibility. This is mandatory so that we make a11y a priority with icons
+   */
   title: string;
 }
+
+/** @deprecated Use @novu/novui/icons instead. */
 export type IconType = (props: IIconProps) => JSX.Element;