From b896546252a3640b534b46f81a889da4dda3b191 Mon Sep 17 00:00:00 2001
From: emayom <emayom7@gmail.com>
Date: Mon, 20 May 2024 20:06:44 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Icon=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=8B=A4=ED=98=95=EC=84=B1=20=EC=A7=80?=
 =?UTF-8?q?=EC=9B=90=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20#14?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/common/Icon/index.tsx | 96 ++++++++++++++----------
 1 file changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/app/components/common/Icon/index.tsx b/src/app/components/common/Icon/index.tsx
index f1c3796b..fe515547 100644
--- a/src/app/components/common/Icon/index.tsx
+++ b/src/app/components/common/Icon/index.tsx
@@ -1,55 +1,69 @@
 import { cva, cx, VariantProps } from 'class-variance-authority';
 
-export const icon = cva(['inline-flex', 'items-center', 'justify-center'], {
-  variants: {
-    size: {
-      12: ['w-12', 'h-12'],
-      16: ['w-16', 'h-16'],
-      20: ['w-20', 'h-20'],
-      24: ['w-24', 'h-24'],
-      32: ['w-32', 'h-32'],
-      40: ['w-40', 'h-40'],
-      44: ['w-44', 'h-44'],
-      48: ['w-48', 'h-48'],
-      64: ['w-64', 'h-64'],
+export const iconStyles = cva(
+  ['inline-flex', 'items-center', 'justify-center'],
+  {
+    variants: {
+      size: {
+        12: ['w-12', 'h-12'],
+        16: ['w-16', 'h-16'],
+        20: ['w-20', 'h-20'],
+        24: ['w-24', 'h-24'],
+        32: ['w-32', 'h-32'],
+        40: ['w-40', 'h-40'],
+        44: ['w-44', 'h-44'],
+        48: ['w-48', 'h-48'],
+        64: ['w-64', 'h-64'],
+      },
+      stroke: {
+        inherit: 'text-inherit',
+        inverse: 'text-[--color-icon-inverse]',
+        disabled: 'text-[--color-icon-disabled]',
+        primary: 'text-[--color-icon-brand]',
+        subtle: 'text-[--color-icon-subtle]',
+        success: 'text-[--color-icon-success]',
+        info: 'text-[--color-icon-info]',
+        warning: 'text-[--color-icon-warning]',
+        danger: 'text-[--color-icon-danger]',
+        pink: 'text-[--color-icon-accent-pink]',
+        violet: 'text-[--color-icon-accent-pink]',
+        blue: 'text-[--color-icon-accent-pink]',
+        'light-blue': 'text-[--color-icon-accent-light-blue]',
+        cyan: 'text-[--color-icon-accent-cyan]',
+        green: 'text-[--color-icon-accent-green]',
+        lime: 'text-[--color-icon-accent-lime]',
+        orange: 'text-[--color-icon-accent-orange]',
+        'red-orange': 'text-[--color-icon-accent-red-orange]',
+        red: 'text-[--color-icon-accent-red]',
+      },
     },
-    stroke: {
-      inherit: 'text-inherit',
-      inverse: 'text-[--color-icon-inverse]',
-      disabled: 'text-[--color-icon-disabled]',
-      primary: 'text-[--color-icon-brand]',
-      subtle: 'text-[--color-icon-subtle]',
-      success: 'text-[--color-icon-success]',
-      info: 'text-[--color-icon-info]',
-      warning: 'text-[--color-icon-warning]',
-      danger: 'text-[--color-icon-danger]',
-      pink: 'text-[--color-icon-accent-pink]',
-      violet: 'text-[--color-icon-accent-pink]',
-      blue: 'text-[--color-icon-accent-pink]',
-      'light-blue': 'text-[--color-icon-accent-light-blue]',
-      cyan: 'text-[--color-icon-accent-cyan]',
-      green: 'text-[--color-icon-accent-green]',
-      lime: 'text-[--color-icon-accent-lime]',
-      orange: 'text-[--color-icon-accent-orange]',
-      'red-orange': 'text-[--color-icon-accent-red-orange]',
-      red: 'text-[--color-icon-accent-red]',
+    defaultVariants: {
+      size: 20,
+      stroke: 'inherit',
     },
   },
-  defaultVariants: {
-    size: 20,
-    stroke: 'inherit',
-  },
-});
+);
 
-export type IconProps<T extends React.ElementType = 'span'> = VariantProps<
-  typeof icon
+export type IconProps<T extends React.ElementType> = VariantProps<
+  typeof iconStyles
 > &
   React.ComponentPropsWithoutRef<T> & {
     children: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+    component?: T;
   };
 
-export default function Icon({ className, children, size, stroke }: IconProps) {
+export default function Icon<T extends React.ElementType = 'span'>({
+  component,
+  className,
+  children,
+  size,
+  stroke,
+}: IconProps<T>) {
+  const Component: React.ElementType = component || 'span';
+
   return (
-    <span className={cx(icon({ size, stroke }), className)}>{children}</span>
+    <Component className={cx(iconStyles({ size, stroke }), className)}>
+      {children}
+    </Component>
   );
 }