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.

10 files changed, 70 insertions, 58 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',
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 9530312..5052f73 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -13,7 +13,8 @@
       padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
       border: fun.convert-px(1) solid var(--color-primary-dark);
       border-radius: fun.convert-px(3);
-      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+      box-shadow:
+        fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
           var(--color-shadow),
         fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1)
           var(--color-shadow-light),
@@ -29,8 +30,6 @@
 
   &:hover {
     .icon {
-      --icon-size: #{fun.convert-px(35)};
-
       :global {
         animation: pulse 1.5s ease-in-out 0.2s infinite;
       }
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index e7a5d48..99f6c85 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -3,10 +3,10 @@ import { useIntl } from 'react-intl';
 import type { Article, Meta as MetaType } from '../../../types';
 import { useReadingTime } from '../../../utils/hooks';
 import {
-  Arrow,
   ButtonLink,
   Heading,
   type HeadingLevel,
+  Icon,
   Link,
 } from '../../atoms';
 import {
@@ -123,11 +123,13 @@ export const Summary: FC<SummaryProps> = ({
         <ButtonLink className={styles['read-more']} to={url}>
           <>
             {readMore}
-            <Arrow
+            <Icon
               aria-hidden={true}
               className={styles.icon}
               // eslint-disable-next-line react/jsx-no-literals -- Direction allowed
-              direction="right"
+              orientation="right"
+              // eslint-disable-next-line react/jsx-no-literals -- Shape allowed
+              shape="arrow"
             />
           </>
         </ButtonLink>
diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss
index 95626ab..6576cf5 100644
--- a/src/components/organisms/modals/settings-modal.module.scss
+++ b/src/components/organisms/modals/settings-modal.module.scss
@@ -30,7 +30,5 @@
 }
 
 .icon {
-  --icon-size: #{fun.convert-px(30)};
-
   margin-right: var(--spacing-2xs);
 }
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index bb3d886..5a53bbd 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { useCallback, type FC, type FormEvent } from 'react';
 import { useIntl } from 'react-intl';
-import { Cog, Form, Heading, Modal, type ModalProps } from '../../atoms';
+import { Form, Heading, Icon, Modal, type ModalProps } from '../../atoms';
 import {
   AckeeToggle,
   type AckeeToggleProps,
@@ -8,7 +8,7 @@ import {
   type MotionToggleProps,
   PrismThemeToggle,
   ThemeToggle,
-} from '../../organisms';
+} from '../forms';
 import styles from './settings-modal.module.scss';
 
 export type SettingsModalProps = Pick<ModalProps, 'className'> & {
@@ -44,12 +44,16 @@ export const SettingsModal: FC<SettingsModalProps> = ({
     description: 'SettingsModal: an accessible form name',
   });
 
+  const submitHandler = useCallback((e: FormEvent) => {
+    e.preventDefault();
+  }, []);
+
   return (
     <Modal
       className={`${styles.wrapper} ${className}`}
       heading={
         <Heading isFake level={3}>
-          <Cog className={styles.icon} />
+          <Icon className={styles.icon} shape="cog" />
           {title}
         </Heading>
       }
@@ -57,7 +61,7 @@ export const SettingsModal: FC<SettingsModalProps> = ({
       <Form
         aria-label={ariaLabel}
         className={styles.form}
-        onSubmit={() => null}
+        onSubmit={submitHandler}
       >
         <ThemeToggle className={styles.item} />
         <PrismThemeToggle className={styles.item} />
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index 6933c44..7f03577 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -1,11 +1,6 @@
 import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import {
-  BooleanField,
-  type BooleanFieldProps,
-  Hamburger,
-  Label,
-} from '../../atoms';
+import { BooleanField, type BooleanFieldProps, Icon, Label } from '../../atoms';
 import { NavList, type NavListProps, type NavItem } from '../../molecules';
 import mainNavStyles from './main-nav.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
@@ -62,7 +57,7 @@ const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
         className={`${sharedStyles.label} ${mainNavStyles.label}`}
         htmlFor="main-nav-button"
       >
-        <Hamburger iconClassName={mainNavStyles.icon} />
+        <Icon shape="hamburger" />
       </Label>
       <NavList
         className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`}
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index b20f0d5..a09bdae 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,11 +1,7 @@
-import { forwardRef, ForwardRefRenderFunction, useRef } from 'react';
+import { forwardRef, type ForwardRefRenderFunction, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { useInputAutofocus } from '../../../utils/hooks';
-import {
-  BooleanField,
-  type BooleanFieldProps,
-  MagnifyingGlass,
-} from '../../atoms';
+import { BooleanField, type BooleanFieldProps, Icon } from '../../atoms';
 import { FlippingLabel } from '../../molecules';
 import { SearchModal, type SearchModalProps } from '../modals';
 import searchStyles from './search.module.scss';
@@ -71,7 +67,7 @@ const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         htmlFor="search-button"
         isActive={isActive}
       >
-        <MagnifyingGlass aria-hidden={true} />
+        <Icon aria-hidden={true} shape="magnifying-glass" size="lg" />
       </FlippingLabel>
       <SearchModal
         className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 3f328a5..53634d8 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,6 +1,6 @@
-import { forwardRef, ForwardRefRenderFunction } from 'react';
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import { BooleanField, type BooleanFieldProps, Cog } from '../../atoms';
+import { BooleanField, type BooleanFieldProps, Icon } from '../../atoms';
 import { FlippingLabel } from '../../molecules';
 import { SettingsModal, type SettingsModalProps } from '../modals';
 import styles from './toolbar-items.module.scss';
@@ -59,7 +59,7 @@ const SettingsWithRef: ForwardRefRenderFunction<
         htmlFor="settings-button"
         isActive={isActive}
       >
-        <Cog aria-hidden={true} />
+        <Icon aria-hidden={true} shape="cog" size="lg" />
       </FlippingLabel>
       <SettingsModal
         ackeeStorageKey={ackeeStorageKey}