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, 6 insertions, 10 deletions

diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss
index 7eae03b..ba746df 100644
--- a/src/components/molecules/buttons/back-to-top.module.scss
+++ b/src/components/molecules/buttons/back-to-top.module.scss
@@ -6,13 +6,9 @@
     height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)});
     padding: 0;
 
-    svg {
-      width: 100%;
-    }
-
     :global {
       .arrow-head {
-        transform: translateY(30%) scale(1.2);
+        transform: translateX(-9%) translateY(30%) scale(1.2);
         transition: all 0.45s ease-in-out 0s;
       }
 
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index 6ca6f10..f2e2073 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -1,6 +1,6 @@
 import type { FC, HTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import { Arrow, ButtonLink } from '../../atoms';
+import { ButtonLink, Icon } from '../../atoms';
 import styles from './back-to-top.module.scss';
 
 export type BackToTopProps = HTMLAttributes<HTMLDivElement> & {
@@ -38,8 +38,8 @@ export const BackToTop: FC<BackToTopProps> = ({
         shape="square"
         to={anchor}
       >
-        {/* eslint-disable-next-line react/jsx-no-literals -- Direction allowed */}
-        <Arrow aria-hidden direction="top" />
+        {/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */}
+        <Icon aria-hidden={true} orientation="top" shape="arrow" />
       </ButtonLink>
     </div>
   );
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx
index 97e2c84..3c3eef5 100644
--- a/src/components/molecules/buttons/heading-button.tsx
+++ b/src/components/molecules/buttons/heading-button.tsx
@@ -1,6 +1,6 @@
 import { useCallback, type FC, type SetStateAction } from 'react';
 import { useIntl } from 'react-intl';
-import { Heading, type HeadingProps, PlusMinus } from '../../atoms';
+import { Heading, type HeadingProps, Icon } from '../../atoms';
 import styles from './heading-button.module.scss';
 
 export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
@@ -61,7 +61,7 @@ export const HeadingButton: FC<HeadingButtonProps> = ({
         <span className="screen-reader-text">{titlePrefix} </span>
         {title}
       </Heading>
-      <PlusMinus state={iconState} className={styles.icon} />
+      <Icon className={styles.icon} shape={iconState} />
     </button>
   );
 };