From 4307f7905a722ef81771668f6d5b25ae1cdae4d3 Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Sun, 8 Aug 2021 11:02:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20sites=E4=B8=8B=E5=A2=9E=E5=8A=A0icon?=
 =?UTF-8?q?=E5=AD=97=E4=BD=93=E5=9B=BE=E6=A0=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sites/.vitepress/devui-theme/index.js | 1 +
 sites/components/icon/index.md        | 6 +-----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/sites/.vitepress/devui-theme/index.js b/sites/.vitepress/devui-theme/index.js
index 156939ec..4010e997 100644
--- a/sites/.vitepress/devui-theme/index.js
+++ b/sites/.vitepress/devui-theme/index.js
@@ -3,6 +3,7 @@ import './styles/layout.css';
 import './styles/code.css';
 import './styles/custom-blocks.css';
 import './styles/sidebar-links.css';
+import '@devui-design/icons/icomoon/devui-icon.css';
 import Layout from './Layout.vue';
 import NotFound from './NotFound.vue';
 const theme = {
diff --git a/sites/components/icon/index.md b/sites/components/icon/index.md
index 2d46c79f..827d9280 100644
--- a/sites/components/icon/index.md
+++ b/sites/components/icon/index.md
@@ -55,8 +55,4 @@ import 'my-icon.css';
 
 ```html
 <d-icon class-prefix="my-icon" name="right" />
-```
-
-<style lang="scss">
-@import '@devui-design/icons/icomoon/devui-icon.css'
-</style>
\ No newline at end of file
+```
\ No newline at end of file
-- 
Gitee


From 60a10794e5877f10371db52ff4816d523fd58b84 Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Sun, 8 Aug 2021 11:12:02 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96Icon=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/icon/src/icon.tsx        | 18 ++++--------------
 sites/components/icon/index.md | 29 +++++++++++++++++++----------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/devui/icon/src/icon.tsx b/devui/icon/src/icon.tsx
index e651d78e..b852cd50 100644
--- a/devui/icon/src/icon.tsx
+++ b/devui/icon/src/icon.tsx
@@ -1,12 +1,5 @@
 import { defineComponent } from 'vue'
 
-type IIconSize = 'sm' | 'md' | 'lg'
-const SIZE_MAP = {
-  sm: '12px',
-  md: '16px',
-  lg: '24px'
-}
-
 export default defineComponent({
   name: 'DIcon',
   props: {
@@ -15,11 +8,8 @@ export default defineComponent({
       required: true
     },
     size: {
-      type: String as () => IIconSize,
-      default: 'md',
-      validator: (value: string) => {
-        return Object.keys(SIZE_MAP).includes(value)
-      }
+      type: String,
+      default: '16px'
     },
     color: {
       type: String,
@@ -39,8 +29,8 @@ export default defineComponent({
     const { name, size, color, classPrefix } = this
 
     return (
-      <i className={`${classPrefix} ${classPrefix}-${name}`} style={{
-        fontSize: SIZE_MAP[size],
+      <i class={`${classPrefix} ${classPrefix}-${name}`} style={{
+        fontSize: size,
         color
       }}></i>
     )
diff --git a/sites/components/icon/index.md b/sites/components/icon/index.md
index 827d9280..d8b9c123 100644
--- a/sites/components/icon/index.md
+++ b/sites/components/icon/index.md
@@ -11,13 +11,13 @@
 <d-icon name="emoji"></d-icon>
 <d-icon name="right" color="#3dcca6"></d-icon>
 <d-icon name="error" color="#f95f5b"></d-icon>
-<d-icon name="ban" color="#f95f5b" size="lg"></d-icon>
+<d-icon name="ban" color="#f95f5b" size="24px"></d-icon>
 
 ```html
 <d-icon name="emoji"></d-icon>
 <d-icon name="right" color="#3dcca6"></d-icon>
 <d-icon name="error" color="#f95f5b"></d-icon>
-<d-icon name="ban" color="#f95f5b" size="lg"></d-icon>
+<d-icon name="ban" color="#f95f5b" size="24px"></d-icon>
 ```
 
 ### 自定义字体图标
@@ -26,33 +26,42 @@ Icon 组件默认引用 DevUI 图标库的图标，如果需要在现有 Icon 
 
 ```css
 @font-face {
-  font-family: 'my-icon';
-  src: url('./my-icon.ttf') format('truetype');
+  font-family: "my-icon";
+  src: url("./my-icon.ttf") format("truetype");
 }
 
 .my-icon {
-  font-family: 'my-icon';
+  font-family: "my-icon";
 }
 
 .my-icon-right::before {
-  content: '\E03F';
+  content: "\E03F";
 }
 ```
 
-引入字体图标的css
+引入字体图标的 css
 
 ```css
-@import 'my-icon.css';
+@import "my-icon.css";
 ```
 
 or
 
 ```js
-import 'my-icon.css';
+import "my-icon.css";
 ```
 
 使用
 
 ```html
 <d-icon class-prefix="my-icon" name="right" />
-```
\ No newline at end of file
+```
+
+### API
+
+|    参数     |   类型   |   默认    | 说明                     | 跳转 Demo                         |
+| :---------: | :------: | :-------: | :----------------------- | --------------------------------- |
+|    name     | `String` |    --     | 必选，Icon 名称          | [基本用法](#基本用法)             |
+|    size     | `String` |  '16px'   | 可选，图标大小           | [基本用法](#基本用法)             |
+|    color    | `String` | '#252b3a' | 可选，图标颜色           | [基本用法](#基本用法)             |
+| classPrefix | `String` |  'icon'   | 可选，自定义字体图标前缀 | [自定义字体图标](#自定义字体图标) |
-- 
Gitee