!242 docs(icon): 完善Icon组件的文档

Merge pull request !242 from kagol/kagol/fix-docs

Author: kagol

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>
+ }
+ </>
  )
  }
 })

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 组件中直接使用。

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>
 ```
 
 :::