From a4a38197a4d0b6c48e40fe26d671dd04cd18d055 Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Mon, 18 Oct 2021 21:16:14 +0800
Subject: [PATCH] =?UTF-8?q?docs(icon):=20=E5=AE=8C=E5=96=84Icon=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/icon/src/icon.tsx        | 16 +++++++++++----
 docs/components/icon/index.md  | 37 +++++++++++++++++++++++++---------
 docs/components/table/index.md | 13 ------------
 3 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/devui/icon/src/icon.tsx b/devui/icon/src/icon.tsx
index cecee9f5..16e45936 100644
--- a/devui/icon/src/icon.tsx
+++ b/devui/icon/src/icon.tsx
@@ -29,10 +29,18 @@ export default defineComponent({
     const { name, size, color, classPrefix } = this
 
     return (
-      <i class={`${classPrefix} ${classPrefix}-${name}`} style={{
-        fontSize: size,
-        color
-      }}></i>
+      <>
+        {
+          /^((https?):)?\/\//.test(name)
+          ? <img src={name} alt={name.split('/')[name.split('/').length - 1]} style={{
+              width: size
+            }} />
+          : <i class={`${classPrefix} ${classPrefix}-${name}`} style={{
+              fontSize: size,
+              color
+            }}></i>
+        }
+      </>
     )
   }
 })
\ No newline at end of file
diff --git a/docs/components/icon/index.md b/docs/components/icon/index.md
index 45ba44f2..12e1d4b6 100644
--- a/docs/components/icon/index.md
+++ b/docs/components/icon/index.md
@@ -12,18 +12,37 @@
 
 ### 基本用法
 
-<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="24px"></d-icon>
+:::demo 通过`name`属性，指定需要显示的图标。
 
-```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="24px"></d-icon>
+```vue
+<d-icon name="like"></d-icon>
+<d-icon name="https://devui.design/components/assets/logo.svg" size="16px"></d-icon>
+```
+
+:::
+
+### 图标颜色
+
+:::demo 通过`color`属性指定图标的颜色。
+
+```vue
+<d-icon name="right-o" color="#50d4ab"></d-icon>
+<d-icon name="error-o" color="#f95f5b"></d-icon>
 ```
 
+:::
+
+### 图标大小
+
+:::demo 通过`size`属性，设置图标大小。
+
+```vue
+<d-icon name="experice-new" size="32px"></d-icon>
+<d-icon name="experice-new" size="48px"></d-icon>
+```
+
+:::
+
 ### 自定义字体图标
 
 Icon 组件默认引用 DevUI 图标库的图标，如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
diff --git a/docs/components/table/index.md b/docs/components/table/index.md
index 07cf4c49..9492d1cf 100644
--- a/docs/components/table/index.md
+++ b/docs/components/table/index.md
@@ -114,19 +114,6 @@
     }
   })
 </script>
-
-
-<style lang="scss">
-  @import '@devui/styles-var/devui-var.scss';
-  .devui-tbody tr {
-    &:nth-child(2n) {
-      background-color: $devui-global-bg-normal;
-    }
-    &:hover {
-      background-color: $devui-list-item-hover-bg;
-    }
-  }
-</style>
 ```
 
 :::
-- 
Gitee