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.

3 files changed, 46 insertions, 28 deletions

diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx
index 0e1649b..2b0a179 100644
--- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx
+++ b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx
@@ -1,8 +1,12 @@
-import { ChangeEvent, FC } from 'react';
+import { useCallback, type ChangeEvent, type FC } from 'react';
 import { useIntl } from 'react-intl';
 import { type PrismTheme, usePrismTheme } from '../../../../utils/providers';
-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 PrismThemeToggleProps = Omit<
   SwitchProps,
@@ -28,9 +32,12 @@ export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
     return prismTheme === '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: 'Code blocks:',
@@ -54,7 +61,7 @@ export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
       label: (
         <>
           <span className="screen-reader-text">{lightThemeLabel}</span>
-          <Sun />
+          <Icon shape="sun" />
         </>
       ),
       value: 'light',
@@ -64,7 +71,7 @@ export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
       label: (
         <>
           <span className="screen-reader-text">{darkThemeLabel}</span>
-          <Moon />
+          <Icon shape="moon" />
         </>
       ),
       value: 'dark',
diff --git a/src/components/organisms/forms/search-form/search-form.tsx b/src/components/organisms/forms/search-form/search-form.tsx
index 826e6c8..1dcbb8c 100644
--- a/src/components/organisms/forms/search-form/search-form.tsx
+++ b/src/components/organisms/forms/search-form/search-form.tsx
@@ -1,14 +1,15 @@
 import { useRouter } from 'next/router';
 import {
-  ChangeEvent,
-  FormEvent,
+  type ChangeEvent,
+  type FormEvent,
   forwardRef,
-  ForwardRefRenderFunction,
+  type ForwardRefRenderFunction,
   useId,
   useState,
+  useCallback,
 } from 'react';
 import { useIntl } from 'react-intl';
-import { Button, Form, Input, Label, MagnifyingGlass } from '../../../atoms';
+import { Button, Form, Icon, Input, Label } from '../../../atoms';
 import { LabelledField } from '../../../molecules';
 import styles from './search-form.module.scss';
 
@@ -44,15 +45,18 @@ const SearchFormWithRef: ForwardRefRenderFunction<
   const router = useRouter();
   const [value, setValue] = useState<string>('');
 
-  const submitHandler = (e: FormEvent) => {
-    e.preventDefault();
-    router.push({ pathname: searchPage, query: { s: value } });
-    setValue('');
-  };
+  const submitHandler = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      router.push({ pathname: searchPage, query: { s: value } });
+      setValue('');
+    },
+    [router, searchPage, value]
+  );
 
-  const updateForm = (e: ChangeEvent<HTMLInputElement>) => {
+  const updateForm = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
-  };
+  }, []);
 
   const id = useId();
 
@@ -84,7 +88,7 @@ const SearchFormWithRef: ForwardRefRenderFunction<
         shape="initial"
         type="submit"
       >
-        <MagnifyingGlass className={styles.btn__icon} />
+        <Icon className={styles.btn__icon} shape="magnifying-glass" />
       </Button>
     </Form>
   );
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',