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.

4 files changed, 48 insertions, 2 deletions

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index d56ba18..49e8e26 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -121,6 +121,43 @@ $font-sizes: ();
 }
 
 //============================================================================
+// Icons
+//============================================================================
+
+$icon_ratio: get-ratio("perfect-fourth");
+$icon-size_base: fun.convert-px(32);
+
+$icon-size_levels: "xs", "sm", "md", "lg", "xl";
+
+// We start with xs icon, so it needs to be less than the base.
+$icon-size_current: math.div($icon-size_base, $icon_ratio * 2);
+
+/// Icons map ('sm', 'md', 'lg'...)
+/// @prop {String} keys - Size as key is mapped to a given icon
+/// @prop {Map} value - Value is actual icon
+$icon-sizes: ();
+
+/// We fill our icon-sizes map.
+@each $level in $icon-size_levels {
+  $icon-size_current: $icon-size_current * $icon_ratio;
+  $icon-sizes: map.merge(
+    $icon-sizes,
+    (
+      $level: $icon-size_current,
+    )
+  );
+}
+
+// We cannot declare this function with others functions due to module loop.
+
+/// Get icon-size.
+/// @param {String} $name - Icon size ('sm', 'md', 'lg'...).
+/// @return {Integer} The icon value.
+@function icon-size($key) {
+  @return map.get($icon-sizes, $key);
+}
+
+//============================================================================
 // Spacings
 //============================================================================
 
diff --git a/src/styles/base/_icons.scss b/src/styles/base/_icons.scss
new file mode 100644
index 0000000..16fdd4a
--- /dev/null
+++ b/src/styles/base/_icons.scss
@@ -0,0 +1,10 @@
+@use "sass:math";
+@use "../abstracts/variables" as var;
+
+:root {
+  --icon-size-xs: #{var.icon-size("xs")};
+  --icon-size-sm: #{var.icon-size("sm")};
+  --icon-size-md: #{var.icon-size("md")};
+  --icon-size-lg: #{var.icon-size("lg")};
+  --icon-size-xl: #{var.icon-size("xl")};
+}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 8ece909..8cf7296 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -17,6 +17,7 @@
 @use "base/colors";
 @use "base/fonts";
 @use "base/helpers";
+@use "base/icons";
 @use "base/spacings";
 @use "base/typography";
 
diff --git a/src/styles/pages/home.module.scss b/src/styles/pages/home.module.scss
index 59c8c6f..a926ec3 100644
--- a/src/styles/pages/home.module.scss
+++ b/src/styles/pages/home.module.scss
@@ -26,8 +26,6 @@
 }
 
 .icon {
-  --icon-size: #{fun.convert-px(20)};
-
   margin-right: var(--spacing-2xs);
 
   &--feed {