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; + +export default meta; + +export const Default = (props: IconProps) => { + return ; +}; 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>; + + return ; +}; + +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";