From 92bdedd5da36e2c0c1758a7f834f265b9637a0b8 Mon Sep 17 00:00:00 2001
From: baegofda <molly.daleo3o@gmail.com>
Date: Fri, 1 Dec 2023 11:00:39 +0900
Subject: [PATCH] =?UTF-8?q?(#0)=20Icon=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/components/Icon/Icon.stories.tsx | 25 +++++++++++++++++++++++
 src/core/components/Icon/index.tsx        | 11 ++++++++++
 src/core/components/Icon/types/index.ts   |  5 +++++
 src/index.ts                              |  1 +
 4 files changed, 42 insertions(+)
 create mode 100644 src/core/components/Icon/Icon.stories.tsx
 create mode 100644 src/core/components/Icon/index.tsx
 create mode 100644 src/core/components/Icon/types/index.ts

diff --git a/src/core/components/Icon/Icon.stories.tsx b/src/core/components/Icon/Icon.stories.tsx
new file mode 100644
index 0000000..32bb44e
--- /dev/null
+++ b/src/core/components/Icon/Icon.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta } from "@storybook/react";
+
+import Icon from "./index";
+import { IconProps } from "./types";
+
+const meta = {
+  title: "core/Icon",
+  component: Icon,
+  argTypes: {
+    iconKey: {
+      control: "text",
+      description: "Phosphor Icons icon name",
+    },
+    size: {
+      control: "text",
+      description: "Phosphor Icons icon size",
+    },
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+export const Default = (props: IconProps) => {
+  return <Icon iconKey = {props.iconKey ?? "Airplane"} size = {props.size}/>;
+};
diff --git a/src/core/components/Icon/index.tsx b/src/core/components/Icon/index.tsx
new file mode 100644
index 0000000..67f61d2
--- /dev/null
+++ b/src/core/components/Icon/index.tsx
@@ -0,0 +1,11 @@
+import * as Icons from "@phosphor-icons/react";
+
+import { IconProps } from "./types";
+
+const Icon = ({ iconKey, ...props }: IconProps) => {
+  const IconComponent = Icons[iconKey as keyof typeof Icons] as React.ComponentType<Omit<IconProps, "iconKey">>;
+
+  return <IconComponent {...props} />;
+};
+
+export default Icon;
diff --git a/src/core/components/Icon/types/index.ts b/src/core/components/Icon/types/index.ts
new file mode 100644
index 0000000..812dabb
--- /dev/null
+++ b/src/core/components/Icon/types/index.ts
@@ -0,0 +1,5 @@
+import * as Icons from "@phosphor-icons/react";
+
+export interface IconProps extends Icons.IconProps {
+  iconKey: keyof typeof Icons
+}
diff --git a/src/index.ts b/src/index.ts
index 8100311..6d1701c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ export { default as Demo } from "@/core/components/Demo";
 export { default as Divider } from "@/core/components/Divider";
 export { default as Drawer } from "@/core/components/Drawer";
 export { default as FormLabel } from "@/core/components/FormLabel";
+export { default as Icon } from "@/core/components/Icon";
 export { default as InputBase } from "@/core/components/Input/InputBase";
 export { default as InputPassword } from "@/core/components/Input/InputPassword";
 export { default as InputSearch } from "@/core/components/Input/InputSearch";