From e04cc91130cba7a974097be7ae8278c5618741f7 Mon Sep 17 00:00:00 2001
From: ssi02014 <ssi02014@naver.com>
Date: Sun, 26 Feb 2023 05:48:04 +0900
Subject: [PATCH] feat: iconSrc Deprecated & New buttonIcon

---
 README.md                                     | 29 ++++++++++---------
 package.json                                  |  2 +-
 src/components/Icon/index.tsx                 | 10 ++-----
 src/lib/ThumbnailGenerator.tsx                | 10 +++++--
 .../components/ThumbnailGenerator.stories.tsx | 12 +++-----
 5 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index e55a4b5..460813d 100644
--- a/README.md
+++ b/README.md
@@ -113,20 +113,22 @@ const App = () => {
         // If you do not enter this option, it will be rendered in the "root" div
         // However, there is a possibility that the UI will change due to CSS inheritance
 
-        iconSrc={iconImage}
-        // Insert the icon of the button to open the Thumbnail Model.
+        buttonIcon={<img src={iconImage} width={30} height={30} />}
+        // Insert the inner icon of the button that opens the thumbnail modal using the "<img>" tag
+        // I recommend the 1:1 ratio icon.
         // If you do not insert this option, the default icon takes effect.
 
+        iconSize="medium"
+        // Select the size of the default buttonIcon.
+        // If you do not enter this option, the default size(medium) applies
+        // But if you insert the button icon yourself, the option is meaningless.
+  
         iconPosition={[0, 20, 20, 0]}
         // Select the location of the button to open the Thumbnail Model.
         // Sequence: [top, right, bottom, left]
 
         modalPosition='right'
         // Select the location to open ThumbnailModal.
-
-        iconSize="medium"
-        // You can select the size of the button that opens the modal.
-        // If you do not enter this option, the default size(medium) applies
         
         additionalFontFamily={['Noto Sans', ...]}
         // You can add the font you want. But those fonts should already be applied to your project.
@@ -164,6 +166,7 @@ export default function Document() {
 
 ```jsx
 import dynamic from "next/dynamic";
+import Image from "next/image";
 
 const ThumbnailGenerator = dynamic(() => import("react-thumbnail-generator"), {
   ssr: false,
@@ -172,7 +175,10 @@ const ThumbnailGenerator = dynamic(() => import("react-thumbnail-generator"), {
 export default function Home() {
   return (
     <>
-      <ThumbnailGenerator id="thumbnail-generator" />
+      <ThumbnailGenerator 
+        id="thumbnail-generator" 
+        buttonIcon={<Image src={profilePic} width={30} height={30} alt="buttonIcon" />} 
+      />
     </>
   );
 }
@@ -253,13 +259,10 @@ const App = () => {
 - id
   - **Optional**
   - Type: `string`
-- iconSrc
+- buttonIcon
   - **Optional**
-  - Default
-
-  <img width="43" alt="스크린샷 2023-02-20 오후 10 48 05" src="https://user-images.githubusercontent.com/64779472/220125380-77aaaa79-9baf-4252-aa46-a44e6e91dd3d.png">
-
-  - Type: `string`
+  - Default: <img width="43" alt="스크린샷 2023-02-20 오후 10 48 05" src="https://user-images.githubusercontent.com/64779472/220125380-77aaaa79-9baf-4252-aa46-a44e6e91dd3d.png">
+  - Type: `Node`
 - iconPosition
   - **Optional**
   - Sequence: [top, right, bottom, left]
diff --git a/package.json b/package.json
index d1bc1ea..3a6112e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-thumbnail-generator",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "react-thumbnail-generator",
   "main": "dist/index.js",
   "module": "dist/index.js",
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 1859a06..7ef8415 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -1,12 +1,6 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
-interface IconProps {
-  src: string;
-  width: number;
-  height: number;
-}
-
-const Icon = ({ src, width, height }: IconProps) => {
+const Icon = ({ src, width, height }: ComponentProps<'img'>) => {
   return <img src={src} width={width} height={height} />;
 };
 
diff --git a/src/lib/ThumbnailGenerator.tsx b/src/lib/ThumbnailGenerator.tsx
index db88b8d..408dc43 100644
--- a/src/lib/ThumbnailGenerator.tsx
+++ b/src/lib/ThumbnailGenerator.tsx
@@ -8,7 +8,7 @@ import Icon from '../components/Icon';
 
 interface ThumbnailGeneratorProps {
   id?: string;
-  iconSrc?: string;
+  buttonIcon?: React.ReactNode;
   iconSize?: 'small' | 'medium' | 'large';
   position?: Position;
   iconPosition?: [number, number, number, number];
@@ -18,7 +18,7 @@ interface ThumbnailGeneratorProps {
 
 const ThumbnailGenerator = ({
   id,
-  iconSrc = toggleButton,
+  buttonIcon,
   iconSize = 'medium',
   iconPosition = [0, 20, 20, 0],
   modalPosition = 'right',
@@ -42,7 +42,11 @@ const ThumbnailGenerator = ({
           />
         ) : (
           <TGOpenButton iconPosition={iconPosition} onClick={onToggleGenerator}>
-            <Icon src={iconSrc} width={tgIconSize} height={tgIconSize} />
+            {buttonIcon ? (
+              buttonIcon
+            ) : (
+              <Icon src={toggleButton} width={tgIconSize} height={tgIconSize} />
+            )}
           </TGOpenButton>
         )}
       </TGPortal>
diff --git a/src/stories/components/ThumbnailGenerator.stories.tsx b/src/stories/components/ThumbnailGenerator.stories.tsx
index 4ffdf27..97380fc 100644
--- a/src/stories/components/ThumbnailGenerator.stories.tsx
+++ b/src/stories/components/ThumbnailGenerator.stories.tsx
@@ -7,10 +7,6 @@ import { toggleButton, fill } from '../../assets/icons';
 export default {
   title: 'components/ThumbnailGenerator',
   argTypes: {
-    iconSrc: {
-      options: [toggleButton, fill],
-      control: { type: 'select' },
-    },
     modalPosition: {
       options: ['left', 'right', 'center'],
       control: { type: 'select' },
@@ -24,7 +20,7 @@ export default {
 
 interface Props {
   iconSize?: Size;
-  iconSrc?: string;
+  buttonIcon?: React.ReactNode;
   modalPosition?: 'left' | 'right' | 'center';
   iconPosition?: [number, number, number, number];
 }
@@ -33,12 +29,12 @@ const Template: Story = ({
   modalPosition,
   iconPosition,
   iconSize,
-  iconSrc,
+  buttonIcon,
 }: Props) => {
   return (
     <ThumbnailGenerator
       id="thumbnail-generator"
-      iconSrc={iconSrc}
+      buttonIcon={buttonIcon}
       modalPosition={modalPosition}
       iconPosition={iconPosition}
       iconSize={iconSize}
@@ -50,7 +46,7 @@ export const Default = Template.bind({});
 
 Default.args = {
   iconSize: 'medium',
-  iconSrc: toggleButton,
+  buttonIcon: <img src={toggleButton} width={40} height={40} />,
   modalPosition: 'right',
   iconPosition: [0, 20, 20, 0],
 };