upd: icon docs

src/packages/icon/demo.vue

@@ -3,12 +3,13 @@
     <h2>基础用法</h2>
     <nut-cell>
       <nut-icon name="dongdong"></nut-icon>
-      <nut-icon name="dongdong"></nut-icon>
+      <nut-icon name="JD"></nut-icon>
     </nut-cell>
     <h2>图标颜色</h2>
     <nut-cell>
       <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
       <nut-icon name="dongdong" color="#64b578"></nut-icon>
+      <nut-icon name="JD" color="#fa2c19"></nut-icon>
     </nut-cell>
 
     <h2>图标大小</h2>

src/packages/icon/doc.md

@@ -22,8 +22,8 @@ app.use(Icon);
 `Icon` 的 `name` 属性支持传入图标名称或图片链接。
 
 ```html
-<nut-icon name="wifi"></nut-icon>
-<nut-icon name="mail"></nut-icon>
+<nut-icon name="dongdong"></nut-icon>
+<nut-icon name="JD"></nut-icon>
 ```
 
 ### 图标颜色
@@ -31,8 +31,9 @@ app.use(Icon);
 `Icon` 的 `color` 属性用来设置图标的颜色。
 
 ```html
-<nut-icon name="mail" color="#fa2c19"></nut-icon>
-<nut-icon name="mail" color="#64b578"></nut-icon>
+<nut-icon name="dongdong" color="#fa2c19"></nut-icon>
+<nut-icon name="dongdong" color="#64b578"></nut-icon>
+<nut-icon name="JD" color="#fa2c19"></nut-icon>
 ```
 
 ### 图标大小
@@ -40,9 +41,9 @@ app.use(Icon);
 `Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
 
 ```html
-<nut-icon name="mail"></nut-icon>
-<nut-icon name="mail" size="24px"></nut-icon>
-<nut-icon name="mail" size="16px"></nut-icon>
+<nut-icon name="dongdong"></nut-icon>
+<nut-icon name="dongdong" size="24px"></nut-icon>
+<nut-icon name="dongdong" size="16px"></nut-icon>
 ```
 
 ### 自定义图标
@@ -74,17 +75,17 @@ app.use(Icon);
 
 ### Props
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| name | 图标名称或图片链接 | _string_ | - |
-| color | 图标颜色 | _string_ | - |
-| size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | - |
-| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `nutui-icon` |
-| tag | HTML 标签 | _string_ | `i` |
+| 参数         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| name         | 图标名称或图片链接               | String | -                |
+| color        | 图标颜色                         | String | -                |
+| size         | 图标大小，如 `20px` `2em` `2rem` | String | -                |
+| class-prefix | 类名前缀，用于使用自定义图标     | String | `nutui-iconfont` |
+| tag          | HTML 标签                        | String | `i`              |
 
 ### Events
 
-| 事件名 | 说明           | 回调参数       |
-| ------ | -------------- | -------------- |
-| click  | 点击图标时触发 | _event: Event_ |
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| click  | 点击图标时触发 | event: Event |
 

src/packages/icon/index.vue

@@ -7,10 +7,20 @@ export default create({
   props: {
     name: {
       type: String,
-      default: 'right'
+      default: ''
+    },
+    size: {
+      type: String,
+      default: ''
+    },
+    classPrefix: {
+      type: String,
+      default: 'nutui-iconfont'
+    },
+    color: {
+      type: String,
+      default: ''
     },
-    size: [Number, String],
-    color: String,
     tag: {
       type: String as PropType<keyof HTMLElementTagNameMap>,
       default: 'i'
@@ -20,18 +30,16 @@ export default create({
   emits: ['click'],
 
   setup(props, { emit, slots }) {
-    const { name, tag, color, size } = toRefs(props);
-
     const handleClick = (event: Event) => {
       emit('click', event);
     };
 
     return () =>
       h(
-        tag.value,
+        props.tag,
         {
-          class: `nutui-iconfont ${componentName}-${name.value}`,
-          style: { color: color?.value, fontSize: size?.value },
+          class: `${props.classPrefix} ${componentName}-${props.name}`,
+          style: { color: props.color, fontSize: props.size },
           onClick: handleClick
         },
         slots.default?.()