Merge pull request #25 from ssi02014/dev

v2.6.1
ssi02014 · Feb 27, 2023 · 1455c55 · 1455c55
2 parents e95300d + 821716d
commit 1455c55
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,6 @@
     <img src="https://contrib.rocks/image?repo=ssi02014/react-thumbnail-generator">
   </a>
 </p>
-
 
 <br />
 
@@ -50,10 +49,28 @@
   </a>
 </p>
 
+
+## Video 📷
+
+<h3 align='center'>Default</h5>
+<p align='center'>
+  <img width="450" src="https://user-images.githubusercontent.com/64779472/221564006-0739ba47-c03a-498b-a9b7-24b87e878878.gif">
+</p>
+
+<br />
+
+<h3 align='center'>Picture</h5>
+<p align='center'>
+  <img width="450" src="https://user-images.githubusercontent.com/64779472/221565682-6eefb15c-92bd-4a3e-83ec-953b9b0acb5b.gif">
+</p>
+
+<br />
+
 ## Features 😁
+
 - Download Thumbnail Image
 - Resize Canvas
-- Choose Background Color & Picture
+- Fill Background Colors or Picture
 - Choose Blur Effect
 - Choose Font Family & Size & Stroke & Color & Angle
 - Drag & Drop Canvas Text
@@ -63,6 +80,17 @@
 - Supports TypeScript & Next
 
 
+<br />
+
+## Top Icons Feature 
+<img width="450-" alt="스크린샷 2023-02-27 오후 9 53 09" src="https://user-images.githubusercontent.com/64779472/221569330-cf13379a-b21e-43a1-a766-b22d874da60d.png">
+
+- 1: Picture
+- 2: Background Color
+- 3: Font Color
+- 4: Font Stroke Color
+- 5: Blur Effect
+
 <br />
 
 ## How to use React 😊
@@ -241,17 +269,6 @@ const App = () => {
 
 <img src="https://user-images.githubusercontent.com/64779472/220677341-7b6c062f-f0f6-49dd-8bcd-b402b61660ea.png" width="450">
 
-<br />
-<br />
-
-## Video 📷
-### Default
-![ezgif com-video-to-gif (4)](https://user-images.githubusercontent.com/64779472/221564006-0739ba47-c03a-498b-a9b7-24b87e878878.gif)
-
-### Picture
-![ezgif com-video-to-gif](https://user-images.githubusercontent.com/64779472/221565682-6eefb15c-92bd-4a3e-83ec-953b9b0acb5b.gif)
-
-
 <br />
 
 ## API 📄
@@ -261,7 +278,7 @@ const App = () => {
 - 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: `Node`
+  - Type: `ReactNode`
 - iconPosition
   - **Optional**
   - Sequence: [top, right, bottom, left]

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-thumbnail-generator",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "react-thumbnail-generator",
   "main": "dist/index.js",
   "module": "dist/index.js",

diff --git a/src/components/TG.styled.ts b/src/components/TG.styled.ts
@@ -260,13 +260,18 @@ export const TGInputFileWrapper = styled.div`
   justify-content: center;
   cursor: pointer;
   border: 1px solid #cccccc;
+  padding: 4px 5px;
 
   label {
     cursor: pointer;
+    margin: 0;
     width: 20px;
     height: 20px;
-    padding: 4px 5px;
-    margin: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   input {