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, 12 insertions, 13 deletions

diff --git a/src/components/molecules/forms/flipping-label/flipping-label.module.scss b/src/components/molecules/forms/flipping-label/flipping-label.module.scss
index 88ef3ec..4e7947f 100644
--- a/src/components/molecules/forms/flipping-label/flipping-label.module.scss
+++ b/src/components/molecules/forms/flipping-label/flipping-label.module.scss
@@ -28,8 +28,6 @@
 }
 
 .wrapper {
-  --icon-size: 60%;
-
   display: flex;
   place-content: center;
   place-items: center;
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
index 3ad3529..bf5724e 100644
--- a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
+++ b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
@@ -1,6 +1,6 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { MagnifyingGlass } from '../../../atoms';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useCallback, useState } from 'react';
+import { Icon } from '../../../atoms';
 import { FlippingLabel } from './flipping-label';
 
 export default {
@@ -75,22 +75,23 @@ const Template: ComponentStory<typeof FlippingLabel> = ({
   ...args
 }) => {
   const [active, setActive] = useState<boolean>(isActive);
+  const updateState = useCallback(() => setActive((prev) => !prev), []);
 
   return (
-    <div onClick={() => setActive(!active)}>
-      <FlippingLabel isActive={active} {...args} />
-    </div>
+    <button onClick={updateState} type="button">
+      <FlippingLabel {...args} isActive={active} />
+    </button>
   );
 };
 
 export const Active = Template.bind({});
 Active.args = {
-  children: <MagnifyingGlass />,
+  children: <Icon shape="magnifying-glass" />,
   isActive: true,
 };
 
 export const Inactive = Template.bind({});
 Inactive.args = {
-  children: <MagnifyingGlass />,
+  children: <Icon shape="magnifying-glass" />,
   isActive: false,
 };
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.tsx b/src/components/molecules/forms/flipping-label/flipping-label.tsx
index 3e23915..e9d6a10 100644
--- a/src/components/molecules/forms/flipping-label/flipping-label.tsx
+++ b/src/components/molecules/forms/flipping-label/flipping-label.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { Close, Label, type LabelProps } from '../../../atoms';
+import type { FC } from 'react';
+import { Icon, Label, type LabelProps } from '../../../atoms';
 import styles from './flipping-label.module.scss';
 
 export type FlippingLabelProps = Pick<
@@ -29,7 +29,7 @@ export const FlippingLabel: FC<FlippingLabelProps> = ({
       <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}>
         <span className={styles.front}>{children}</span>
         <span className={styles.back}>
-          <Close aria-hidden={true} />
+          <Icon aria-hidden={true} shape="cross" />
         </span>
       </span>
     </Label>