feat: add icon button

NOTE.md

@@ -3,15 +3,18 @@
 
 # Basic Components
 * [x] Typography
-  * [] Link - fontSize todo
+  * [x] Link
 * [x] Button
-  * [] IconButton
+  * [x] IconButton
   * [x] TextButton
 * [x] Modal
 * [x] Step
 * [x] Tooltip
 * [x] Tag
+
+# HandWrite Component
 * Hamburger Menu - 需要手写！
+* Captcha Input - 需要找别的组件！
 
 # Form Components
 * Input
@@ -22,7 +25,6 @@
 * Checkbox
 * Textarea
 * Select
-* Captcha Input - 需要找别的组件！
 * Form
 * FormItem
   * FormItem with Validate Icon

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.0.1",
     "@ant-design/static-style-extract": "^1.0.1",
     "@types/ua-parser-js": "^0.7.36",
     "antd": "^5.4.4",

src/App.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { BreakpointProvider } from './components/Breakpoint'
 import { ConfigProvider } from 'antd'
-import { Steps } from './components/Steps'
+import { Button } from './components/Button'
+import Icon from '@ant-design/icons';
+import { ReactComponent as CloseIcon } from './icons/close.svg'
 
 const brandPrimary = '#FF5200';
 const textPrimary = '#1E1D1F'
@@ -89,7 +91,7 @@ function App() {
 		>
 			<BreakpointProvider>
 				<div>iHealth</div>
-				<Steps current={1} items={items} />
+				<Button icon={<Icon component={CloseIcon} />} />
 			</BreakpointProvider>
 		</ConfigProvider>
 	);

src/styles/reset.css

@@ -2,6 +2,13 @@
 	font-weight: 500 !important;
 }
 
+.ant-btn.ant-btn-icon-only {
+	width: 50px !important;
+	height: 50px !important;
+	font-size: 27px !important;
+	line-height: 50px !important;
+}
+
 .ant-btn-link, .ant-btn-text {
 	font-size: 12px;
 	line-height: 16px;
@@ -29,9 +36,11 @@
 	font-size: 24px !important;
 	line-height: 1 !important;
 }
+
 .health-tooltip-highlighted.ant-tooltip .ant-tooltip-arrow:after {
 	box-shadow: 1px 1px 0 #FF5A0C;
 }
+
 .health-tooltip-highlighted.ant-tooltip .ant-tooltip-inner {
 	position: relative;
 	box-shadow: 1px 1px 0px 0 #FF5A0C, -1px -1px 0px 0 #FF5A0C, -1px 1px 0px 0 #FF5A0C, 1px -1px 0px 0 #FF5A0C;

yarn.lock

@@ -40,7 +40,7 @@
   resolved "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz#8630da8eb4471a4aabdaed7d1ff6a97dcb2cf05a"
   integrity sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
 
-"@ant-design/icons@^5.0.0":
+"@ant-design/icons@^5.0.0", "@ant-design/icons@^5.0.1":
   version "5.0.1"
   resolved "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.0.1.tgz#febb1fdc5776f58187b2c953ac9a4496069d045b"
   integrity sha512-ZyF4ksXCcdtwA/1PLlnFLcF/q8/MhwxXhKHh4oCHDA4Ip+ZzAHoICtyp4wZWfiCVDP0yuz3HsjyvuldHFb3wjA==