🎨 styles: button with only icon

:%s

pages/index.tsx

@@ -17,6 +17,9 @@ export default function Home() {
       </div>
 
       <ButtonCommon type='ghost' icon={<IconBuy />}>Button</ButtonCommon>
+      <ButtonCommon type='light'><IconBuy /></ButtonCommon>
+      <ButtonCommon type='light' icon={<IconBuy />}/>
+      <ButtonCommon type='ghost' icon={<IconBuy />} size='large'/>
     </>
   )
 }

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -11,6 +11,20 @@
     cursor: not-allowed;
     color: var(--disabled);
   }
+  &:hover {
+    @apply shadow-md;
+    &:not(:disabled) {
+      filter: brightness(1.05);
+    }
+  }
+  &:focus {
+    outline: none;
+    filter: brightness(1.05);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--text-active);
+  }
+
   &.loading {
     &::before {
       content: "";
@@ -24,20 +38,6 @@
       margin-right: 0.8rem;
     }
   }
-  &:hover {
-    @apply shadow-md;
-    &:not(:disabled) {
-      filter: brightness(1.05);
-    }
-  }
-
-  &:focus {
-    outline: none;
-    filter: brightness(1.05);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--text-active);
-  }
 
   &.light {
     @apply text-base bg-white;
@@ -60,8 +60,18 @@
     }
   }
 
+  &.onlyIcon {
+    padding: 0.8rem;
+    .icon {
+      margin: 0;
+    }
+  }
+
   &.large {
     padding: 3.2rem 4.8rem;
+    &.onlyIcon {
+      padding: 1.6rem;
+    }
     &.loading {
       &::before {
         width: 2.4rem;
@@ -70,6 +80,8 @@
     }
   }
 
+
+
   &.preserve {
     flex-direction: row-reverse;
     .icon {
@@ -79,6 +91,10 @@
 
   .icon {
     margin: 0 1.6rem 0 0;
+  }
+
+  .label,
+  .icon {
     svg path {
       fill: currentColor;
     }

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -13,8 +13,8 @@ interface Props {
     onClick?: () => void,
 }
 
-const ButtonCommon = memo(({ type = 'primary', size = 'default',
+const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false, isIconSuffix = false,
-    icon, loading, disabled, isIconSuffix, children, onClick }: Props) => {
+    icon, disabled, children, onClick }: Props) => {
     return (
         <button className={classNames({
             [s.buttonCommon]: true,
@@ -22,6 +22,7 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default',
             [s[size]]: !!size,
             [s.loading]: loading,
             [s.preserve]: isIconSuffix,
+            [s.onlyIcon]: icon && !children,
         })}
             disabled={disabled}
             onClick={onClick}