feat(components): replace icons with a generic Icon component

Sizes are also predefined and can be set using the `size` prop,
so the consumers should no longer adjust the size in CSS.

1 files changed, 15 insertions, 8 deletions

diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.tsx
index da303d3..6026e1c 100644
--- a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx
+++ b/src/components/organisms/forms/theme-toggle/theme-toggle.tsx
@@ -1,8 +1,12 @@
 import { useTheme } from 'next-themes';
-import { ChangeEvent, FC } from 'react';
+import { useCallback, type ChangeEvent, type FC } from 'react';
 import { useIntl } from 'react-intl';
-import { Legend, Moon, Sun } from '../../../atoms';
-import { Switch, SwitchOption, SwitchProps } from '../../../molecules';
+import { Icon, Legend } from '../../../atoms';
+import {
+  Switch,
+  type SwitchOption,
+  type SwitchProps,
+} from '../../../molecules';
 
 export type ThemeToggleProps = Omit<
   SwitchProps,
@@ -19,9 +23,12 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
   const { resolvedTheme, setTheme } = useTheme();
   const isDarkTheme = resolvedTheme === 'dark';
 
-  const updateTheme = (e: ChangeEvent<HTMLInputElement>) => {
-    setTheme(e.target.value === 'light' ? 'light' : 'dark');
-  };
+  const updateTheme = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setTheme(e.target.value === 'light' ? 'light' : 'dark');
+    },
+    [setTheme]
+  );
 
   const themeLabel = intl.formatMessage({
     defaultMessage: 'Theme:',
@@ -45,7 +52,7 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
       label: (
         <>
           <span className="screen-reader-text">{lightThemeLabel}</span>
-          <Sun />
+          <Icon shape="sun" />
         </>
       ),
       value: 'light',
@@ -55,7 +62,7 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
       label: (
         <>
           <span className="screen-reader-text">{darkThemeLabel}</span>
-          <Moon />
+          <Icon shape="moon" />
         </>
       ),
       value: 'dark',