Add icon capability to the button

src/components/button/Button.module.scss

@@ -25,6 +25,22 @@
   }
 }
 
+.icon {
+  width: 3.2rem;
+  height: 3.2rem;
+
+  padding: 0;
+
+  .children {
+    position: absolute;
+    transform: translate(-50%, -50%);
+  }
+
+  .background {
+    border-radius: 100%;
+  }
+}
+
 .background {
   border-radius: 1rem;
   background: $accent;

src/components/button/Button.tsx

@@ -3,16 +3,17 @@ import styles from "./Button.module.scss";
 import { ReactComponent } from "../../assets/svgr-custom";
 // @ts-ignore
 import { ReactComponent as LoadingCircles } from "../../assets/loading-circles.svg";
+import { combineConditionalClasses } from "../../helpers/combineClasses";
 
 interface ButtonProps {
   loading?: boolean;
-  icon?: typeof ReactComponent;
+  icon?: boolean;
   children: any;
 }
 
 const Button: React.FC<ButtonProps> = ({ children, loading, icon }) => {
   return (
-    <button className={styles.button}>
+    <button className={combineConditionalClasses({ [styles.button]: true, [styles.icon]: !!icon })}>
       <div className={styles.background}></div>
       <div style={{ opacity: loading ? 0 : 1 }} className={styles.children}>
         {children}

src/helpers/combineClasses.ts

@@ -0,0 +1,11 @@
+export function combineClasses(...classes: string[]): string {
+  return classes.join(" ");
+}
+
+export function combineConditionalClasses(classes: { [k: string]: boolean }): string {
+  return combineClasses(
+    ...Object.entries(classes)
+      .filter(([_, v]) => v)
+      .map(([k]) => k)
+  );
+}

src/stories/Button.stories.tsx

@@ -13,4 +13,5 @@ export const defaultButton = Template.bind({});
 defaultButton.args = {
   children: "Test",
   loading: false,
+  icon: false,
 };