refactor: refactor button with icon component

packages/lsd-react/src/components/Button/Button.stories.tsx

@@ -1,15 +1,42 @@
 import { Meta, Story } from '@storybook/react'
+import { useStorybookIconComponent } from '../../utils/storybook.utils'
 import { Button, ButtonProps } from './Button'
 
 export default {
   title: 'Button',
   component: Button,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+    icon: {
+      type: {
+        name: 'enum',
+        value: useStorybookIconComponent.options,
+      },
+    },
+  },
 } as Meta
 
-export const Root: Story<ButtonProps> = (args) => (
-  <Button {...args}>Button</Button>
-)
+export const Root: Story<ButtonProps & { icon: string }> = ({
+  icon,
+  ...args
+}) => {
+  const IconComponent = useStorybookIconComponent(icon)
+  return (
+    <Button
+      {...args}
+      icon={IconComponent && <IconComponent color="primary"></IconComponent>}
+    >
+      Button
+    </Button>
+  )
+}
+
 Root.args = {
   disabled: false,
-  withIcon: false,
 }

packages/lsd-react/src/components/Button/Button.tsx

@@ -1,16 +1,15 @@
 import clsx from 'clsx'
 import React from 'react'
-import { PickIcon } from '../Icons'
 import { buttonClasses } from './Button.classes'
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   size?: 'large' | 'medium' | 'small'
-  withIcon?: boolean
+  icon: React.ReactNode
 }
 
 export const Button: React.FC<ButtonProps> & {
   classes: typeof buttonClasses
-} = ({ size = 'medium', withIcon = 'false', children, ...props }) => {
+} = ({ size = 'medium', icon, children, ...props }) => {
   return (
     <>
       <button
@@ -20,15 +19,11 @@ export const Button: React.FC<ButtonProps> & {
           buttonClasses.root,
           buttonClasses[size],
           props.disabled && buttonClasses.disabled,
-          withIcon && buttonClasses.withIcon,
+          icon && buttonClasses.withIcon,
         )}
       >
         <span className={buttonClasses.text}>{children}</span>
-        {withIcon && (
-          <span className={buttonClasses.icon}>
-            {<PickIcon color="primary" />}
-          </span>
-        )}
+        {icon && <span className={buttonClasses.icon}>{icon}</span>}
       </button>
     </>
   )