chore(grid): use icons-vue component

src/packages/__VUE/grid/common.ts

@@ -16,15 +16,6 @@ export const gridProps = {
     type: [Number, String],
     default: 4
   },
-  // 图标大小
-  iconSize: {
-    type: [Number, String],
-    default: 28
-  },
-  // 图标颜色
-  iconColor: {
-    type: String
-  },
   // 是否显示边框
   border: {
     type: Boolean,

src/packages/__VUE/grid/demo.vue

@@ -2,69 +2,74 @@
   <div class="demo full">
     <h2>{{ translate('basic') }}</h2>
     <nut-grid>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
     </nut-grid>
 
-    <h2>{{ translate('columnNum') }}</h2>
     <nut-grid :column-num="3">
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>{{ translate('square') }}</h2>
     <nut-grid :column-num="3" square>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>{{ translate('gutter') }}</h2>
     <nut-grid :gutter="10">
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>{{ translate('reverse') }}</h2>
     <nut-grid reverse>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>{{ translate('Horizontal') }}</h2>
     <nut-grid direction="horizontal">
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>{{ translate('iconStyle') }}</h2>
-    <nut-grid :column-num="3" icon-color="#fa2c19">
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" icon-color="#478EF2" icon-size="40" :text="translate('text')"></nut-grid-item>
-      <nut-grid-item icon="dongdong" :text="translate('text')"></nut-grid-item>
+    <nut-grid :column-num="3">
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
+      <nut-grid-item :text="translate('text')">
+        <Dongdong height="40px" width="40px" color="#478EF2" />
+      </nut-grid-item>
+      <nut-grid-item :text="translate('text')"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>{{ translate('route') }}</h2>
     <nut-grid :column-num="2">
-      <nut-grid-item icon="home" :text="translate('vueRouter')" to="/"></nut-grid-item>
-      <nut-grid-item icon="search" :text="translate('url')" url="https://jd.com"></nut-grid-item>
+      <nut-grid-item :text="translate('vueRouter')" to="/">
+        <Home />
+      </nut-grid-item>
+      <nut-grid-item :text="translate('url')" url="https://jd.com">
+        <Search />
+      </nut-grid-item>
     </nut-grid>
 
     <h2>{{ translate('customContent') }}</h2>
@@ -83,6 +88,7 @@
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('grid');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Dongdong, Home, Search } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -115,6 +121,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { Dongdong, Home, Search },
   props: {},
   setup() {
     initTranslate();

src/packages/__VUE/grid/doc.en-US.md

@@ -24,14 +24,14 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -43,9 +43,9 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid :column-num="3">
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -57,9 +57,9 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid :column-num="3" square>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -71,14 +71,14 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid :gutter="10">
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -90,10 +90,10 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid reverse>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -105,10 +105,10 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid direction="horizontal">
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -119,10 +119,12 @@ app.use(GridItem);
 :::demo
 ```html
 <template>
-  <nut-grid :column-num="3" icon-color="#fa2c19">
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" icon-color="#478EF2" icon-size="40" text="text"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="text"></nut-grid-item>
+  <nut-grid :column-num="3">
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="text">
+      <Dongdong height="40px" width="40px" color="#478EF2" />
+    </nut-grid-item>
+    <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -134,8 +136,12 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid :column-num="2">
-    <nut-grid-item icon="home" text="Vue Router" to="/"></nut-grid-item>
-    <nut-grid-item icon="search" text="URL" url="https://jd.com"></nut-grid-item>
+    <nut-grid-item text="Vue Router" to="/">
+      <Home />
+    </nut-grid-item>
+    <nut-grid-item text="URL" url="https://jd.com">
+      <Search />
+    </nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -162,11 +168,9 @@ app.use(GridItem);
 
 ### Grid Props
 
-| 参数          | 说明                                      | 类型                    | 默认值      |
-|---------------|------------------------------------------|------------------------|------------|
+| Attribute | Description | Type | 默认值 |
+|-|-|-|-|
 | column-num    | Column Num                                     | number \| string         | `4`        |
-| icon-size     | Icon size,for example `20px` `2em` `2rem`          | number \| string        | `28px`     |
-| icon-color    | Icon color                                  | string                 | -          |
 | border        | Whether to show border                               | boolean                | `true`     |
 | gutter        | Gutter,The default unit is `px`               | number \| string        | `0`        |
 | center        | Whether to center content                      | boolean                | `true`      |
@@ -177,22 +181,18 @@ app.use(GridItem);
 
 ### GridItem Props
 
-| 参数                  | 说明                                                                                     | 类型               | 默认值      |
-|----------------------|-----------------------------------------------------------------------------------------|--------------------|------------|
-| text                 | text                                                                                     | string             | -          |
-| icon                 | Icon name or URL                                                            | string             | -          |
-| icon-size            | Icon size,for example `20px` `2em` `2rem`      | number \| string  |`28px`  |
-| icon-color           | Icon color              | string            | -           |
-| url `not supported by miniProgram`   | Link URL             | string            | -           |
-| to `not supported by miniProgram` | 	Target route of the link, same as [to](https://router.vuejs.org/zh/api/#to) of vue-router | string \| object| -    |
-| replace `not supported by miniProgram` | If true, the navigation will not leave a history record       | boolean           | `false`     |
+| Attribute | Description | Type | Default |
+|-|-|-|-|
+| text | text | string | - |
+| url `not supported by miniProgram` | Link URL | string | - |
+| to `not supported by miniProgram` | Target route of the link, same as [to](https://router.vuejs.org/zh/api/#to) of vue-router | string \| object| - |
+| replace `not supported by miniProgram` | If true, the navigation will not leave a history record | boolean | `false` |
 
 ### GridItem Slots
 
 | Name                   | Description                 |
 |-----------------------|----------------------|
 | default               | Custom content         |
-| icon                  | Custom icon            |
 | text                  | Custom text            |
 
 ### GridItem Events

src/packages/__VUE/grid/doc.md

@@ -24,14 +24,14 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -43,9 +43,9 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid :column-num="3">
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -57,9 +57,9 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid :column-num="3" square>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -71,14 +71,14 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid :gutter="10">
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -90,10 +90,10 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid reverse>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -105,10 +105,10 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid direction="horizontal">
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -119,10 +119,12 @@ app.use(GridItem);
 :::demo
 ```html
 <template>
-  <nut-grid :column-num="3" icon-color="#fa2c19">
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" icon-color="#478EF2" icon-size="40" text="文字"></nut-grid-item>
-    <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+  <nut-grid :column-num="3">
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+    <nut-grid-item text="文字">
+      <Dongdong height="40px" width="40px" color="#478EF2" />
+    </nut-grid-item>
+    <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -134,8 +136,12 @@ app.use(GridItem);
 ```html
 <template>
   <nut-grid :column-num="2">
-    <nut-grid-item icon="home" text="路由跳转 ’/‘ " to="/"></nut-grid-item>
-    <nut-grid-item icon="search" text="URL 跳转" url="https://jd.com"></nut-grid-item>
+    <nut-grid-item text="路由跳转" to="/">
+      <Home />
+    </nut-grid-item>
+    <nut-grid-item text="链接跳转" url="https://jd.com">
+      <Search />
+    </nut-grid-item>
   </nut-grid>
 </template>
 ```
@@ -163,8 +169,6 @@ app.use(GridItem);
 | 参数          | 说明                                      | 类型                    | 默认值      |
 |---------------|------------------------------------------|------------------------|------------|
 | column-num    | 列数                                     | number \| string         | `4`        |
-| icon-size     | 图标大小，如 `20px` `2em` `2rem`          | number \| string        | `28px`     |
-| icon-color    | 图标颜色                                  | string                 | -          |
 | border        | 是否显示边框                               | boolean                | `true`     |
 | gutter        | 格子之间的间距，默认单位为`px`               | number \| string        | `0`        |
 | center        | 是否将格子内容居中显示                      | boolean                | `true`      |
@@ -178,9 +182,6 @@ app.use(GridItem);
 | 参数                  | 说明                                                                                     | 类型               | 默认值      |
 |----------------------|-----------------------------------------------------------------------------------------|--------------------|------------|
 | text                 | 文字                                                                                     | string             | -          |
-| icon                 | [图标名称](#/zh-CN/component/icon) 或图片链接                                                              | string             | -          |
-| icon-size            | 图标大小，如 `20px` `2em` `2rem`                                                          | number \| string   | `28px`     |
-| icon-color           | 图标颜色                                                                                  | string            | -           |
 | url `小程序不支持`     | 点击后跳转的链接地址                                                                        | string            | -           |
 | to `小程序不支持`      | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | string \| object  | -           |
 | replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                 | boolean           | `false`     |
@@ -190,7 +191,6 @@ app.use(GridItem);
 | 名称                   | 说明                 |
 |-----------------------|----------------------|
 | default               | 自定义所有内容         |
-| icon                  | 自定义图标            |
 | text                  | 自定义文字            |
 
 ### GridItem Events

src/packages/__VUE/griditem/index.taro.vue

@@ -1,22 +1,11 @@
 <template>
   <view :class="rootClass" :style="rootStyle" @click="handleClick">
     <view :class="contentClass">
-      <template v-if="$slots.default">
-        <slot></slot>
-      </template>
-      <template v-else>
-        <slot v-if="$slots.icon" name="icon"></slot>
-        <nut-icon
-          v-else
-          :name="iconProps.name"
-          v-bind="$attrs"
-          :size="iconProps.size"
-          :color="iconProps.color"
-        ></nut-icon>
-
-        <slot v-if="$slots.text" name="text"></slot>
-        <view v-else class="nut-grid-item__text">{{ text }}</view>
-      </template>
+      <slot></slot>
+      <view class="nut-grid-item__text">
+        <template v-if="text">{{ text }}</template>
+        <slot v-else name="text"></slot>
+      </view>
     </view>
   </view>
 </template>
@@ -33,16 +22,6 @@ export default create({
   props: {
     text: {
       type: String
-    },
-    // icon
-    icon: {
-      type: String
-    },
-    iconSize: {
-      type: [Number, String]
-    },
-    iconColor: {
-      type: String
     }
     // router
     // to: {
@@ -104,15 +83,6 @@ export default create({
       };
     });
 
-    // icon
-    const iconProps = computed(() => {
-      return {
-        name: props.icon,
-        size: props.iconSize || parent.iconSize,
-        color: props.iconColor || parent.iconColor
-      };
-    });
-
     // click
     const handleClick = (event: Event) => {
       emit('click', event);
@@ -122,7 +92,6 @@ export default create({
       rootClass,
       rootStyle,
       contentClass,
-      iconProps,
       handleClick
     };
   }

src/packages/__VUE/griditem/index.vue

@@ -1,22 +1,11 @@
 <template>
   <view :class="rootClass" :style="rootStyle" @click="handleClick">
     <view :class="contentClass">
-      <template v-if="$slots.default">
-        <slot></slot>
-      </template>
-      <template v-else>
-        <slot v-if="$slots.icon" name="icon"></slot>
-        <nut-icon
-          v-else
-          :name="iconProps.name"
-          v-bind="$attrs"
-          :size="iconProps.size"
-          :color="iconProps.color"
-        ></nut-icon>
-
-        <slot v-if="$slots.text" name="text"></slot>
-        <view v-else class="nut-grid-item__text">{{ text }}</view>
-      </template>
+      <slot></slot>
+      <view class="nut-grid-item__text">
+        <template v-if="text">{{ text }}</template>
+        <slot v-else name="text"></slot>
+      </view>
     </view>
   </view>
 </template>
@@ -35,16 +24,6 @@ export default create({
     text: {
       type: String
     },
-    // icon
-    icon: {
-      type: String
-    },
-    iconSize: {
-      type: [Number, String]
-    },
-    iconColor: {
-      type: String
-    },
     // router
     to: {
       type: [String, Object]
@@ -105,15 +84,6 @@ export default create({
       };
     });
 
-    // icon
-    const iconProps = computed(() => {
-      return {
-        name: props.icon,
-        size: props.iconSize || parent.iconSize,
-        color: props.iconColor || parent.iconColor
-      };
-    });
-
     // click
     const router = useRouter();
     const handleClick = (event: Event) => {
@@ -130,7 +100,6 @@ export default create({
       rootClass,
       rootStyle,
       contentClass,
-      iconProps,
       handleClick
     };
   }

src/sites/mobile-taro/vue/src/layout/pages/grid/index.vue

@@ -2,63 +2,65 @@
   <div class="demo full">
     <h2>基础用法</h2>
     <nut-grid>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>自定义列数</h2>
     <nut-grid :column-num="3">
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>正方形格子</h2>
     <nut-grid :column-num="3" square>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>格子间距</h2>
     <nut-grid :gutter="10">
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>内容翻转</h2>
     <nut-grid reverse>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>内容横向</h2>
     <nut-grid direction="horizontal">
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <h2>图标颜色/大小</h2>
-    <nut-grid :column-num="3" icon-color="#fa2c19">
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" icon-color="#478EF2" icon-size="40" text="文字"></nut-grid-item>
-      <nut-grid-item icon="dongdong" text="文字"></nut-grid-item>
+    <nut-grid :column-num="3">
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
+      <nut-grid-item text="文字">
+        <Dongdong width="40px" height="40px" color="#478EF2" />
+      </nut-grid-item>
+      <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
     </nut-grid>
 
     <!-- <h2>页面导航</h2>