chore(avatar): use icons-vue component

src/packages/__VUE/avatar/__tests__/avatar.spec.ts

@@ -1,11 +1,8 @@
 import { config, mount } from '@vue/test-utils';
 import Avatar from '../index.vue';
-import NutIcon from '../../icon/index.vue';
 
 beforeAll(() => {
-  config.global.components = {
-    NutIcon
-  };
+  config.global.components = {};
 });
 
 afterAll(() => {
@@ -56,46 +53,46 @@ test('color props', async () => {
   expect(avatar.element.style.color).toBe('rgb(153, 153, 153)');
 });
 
-test('icon props', () => {
-  const wrapper = mount(Avatar, {
-    props: {
-      icon: 'my'
-    }
-  });
-  const icon: any = wrapper.find('.nut-icon');
-  expect(icon.classes()).toContain('nut-icon-my');
-});
+// test('icon props', () => {
+//   const wrapper = mount(Avatar, {
+//     props: {
+//       icon: 'my'
+//     }
+//   });
+//   const icon: any = wrapper.find('.nut-icon');
+//   expect(icon.classes()).toContain('nut-icon-my');
+// });
 
-test('url props', () => {
-  const wrapper = mount(Avatar, {
-    props: {
-      url: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png'
-    }
-  });
-  const img: any = wrapper.find('img');
-  expect(img.attributes().src).toBe(
-    'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png'
-  );
-});
+// test('url props', () => {
+//   const wrapper = mount(Avatar, {
+//     props: {
+//       url: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png'
+//     }
+//   });
+//   const img: any = wrapper.find('img');
+//   expect(img.attributes().src).toBe(
+//     'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png'
+//   );
+// });
 
-test('alt props', () => {
-  const wrapper = mount(Avatar, {
-    props: {
-      url: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png',
-      alt: '我是alt'
-    }
-  });
-  const img: any = wrapper.find('img');
-  expect(img.attributes().alt).toBe('我是alt');
-});
+// test('alt props', () => {
+//   const wrapper = mount(Avatar, {
+//     props: {
+//       url: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png',
+//       alt: '我是alt'
+//     }
+//   });
+//   const img: any = wrapper.find('img');
+//   expect(img.attributes().alt).toBe('我是alt');
+// });
 
 // 点击事件
-test('should emit active-avatarror event', () => {
-  const wrapper = mount(Avatar);
-  const avatar: any = wrapper.find('.nut-avatar');
-  avatar.trigger('click');
-  expect(wrapper.emitted('click')).toHaveLength(1);
-});
+// test('should emit active-avatarror event', () => {
+//   const wrapper = mount(Avatar);
+//   const avatar: any = wrapper.find('.nut-avatar');
+//   avatar.trigger('click');
+//   expect(wrapper.emitted('click')).toHaveLength(1);
+// });
 
 // test('should emit onError event', () => {
 //   const wrapper = mount(Avatar, {

src/packages/__VUE/avatar/demo.vue

@@ -2,89 +2,93 @@
   <div class="demo full">
     <h2>{{ translate('title1') }}</h2>
     <nut-cell>
-      <nut-avatar
-        size="large"
-        url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      >
+      <nut-avatar size="large">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
       </nut-avatar>
-      <nut-avatar
-        size="normal"
-        url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      >
+      <nut-avatar size="normal">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
       </nut-avatar>
-      <nut-avatar
-        size="small"
-        url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      >
+      <nut-avatar size="small">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
       </nut-avatar>
     </nut-cell>
     <h2>{{ translate('title2') }}</h2>
     <nut-cell>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
-      <nut-avatar icon="my" shape="round"></nut-avatar>
+      <nut-avatar shape="square"><My /></nut-avatar>
+      <nut-avatar shape="round"><My /></nut-avatar>
     </nut-cell>
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>
-      <nut-avatar
-        url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      >
+      <nut-avatar>
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
       </nut-avatar>
-      <nut-avatar icon="my"></nut-avatar>
-      <nut-avatar>N</nut-avatar>
+      <nut-avatar><My /></nut-avatar>
+      <nut-avatar>王</nut-avatar>
     </nut-cell>
     <h2>{{ translate('title4') }}</h2>
     <nut-cell>
-      <nut-avatar class="demo-avatar" icon="my" color="#fff" bg-color="#FA2C19"></nut-avatar>
-      <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+      <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff" /></nut-avatar>
+      <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
     </nut-cell>
     <h2>{{ translate('title5') }}</h2>
     <nut-cell>
       <nut-badge value="8">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"><My /></nut-avatar>
       </nut-badge>
       <nut-badge dot>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"><My /></nut-avatar>
       </nut-badge>
     </nut-cell>
     <h2>{{ translate('title6') }}</h2>
     <nut-cell>
       <nut-avatar-group span="-4">
-        <nut-avatar
-          url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        >
+        <nut-avatar>
+          <img
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+          />
         </nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+        <nut-avatar><My /></nut-avatar>
+        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
       </nut-avatar-group>
     </nut-cell>
 
     <nut-cell>
       <nut-avatar-group max-count="3" max-color="#fff" max-bgColor="#498ff2">
-        <nut-avatar
-          url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        >
+        <nut-avatar>
+          <img
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+          />
         </nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
+        <nut-avatar><My /></nut-avatar>
+        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+        <nut-avatar><My /></nut-avatar>
       </nut-avatar-group>
     </nut-cell>
     <h2>{{ translate('title7') }}</h2>
     <nut-cell>
       <nut-avatar-group max-count="3" zIndex="right" max-content="...">
-        <nut-avatar
-          url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        >
+        <nut-avatar>
+          <img
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+          />
         </nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
+        <nut-avatar><My /></nut-avatar>
+        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+        <nut-avatar><My /></nut-avatar>
       </nut-avatar-group>
     </nut-cell>
 
     <h2>{{ translate('title8') }}</h2>
     <nut-cell>
-      <nut-avatar icon="my" @active-avatar="handleClick"></nut-avatar>
+      <nut-avatar @click="handleClick"><My /></nut-avatar>
     </nut-cell>
   </div>
 </template>
@@ -92,6 +96,7 @@
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('cell');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { My } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -116,16 +121,14 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { My },
   props: {},
   setup() {
     initTranslate();
     const handleClick = () => {
       console.log('Click Test');
     };
-    const onError = () => {
-      console.log('Error Test');
-    };
-    return { handleClick, onError, translate };
+    return { handleClick, translate };
   }
 });
 </script>

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

@@ -8,11 +8,10 @@ Avatars can be used to represent people or objects. It supports images, Icons, o
 
 ```javascript
 import { createApp } from 'vue';
-import { Avatar, Icon } from '@nutui/nutui';
+import { Avatar } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Avatar);
-app.use(Icon);
 ```
 
 ### Size
@@ -23,18 +22,15 @@ Support three sizes：small、normal、large
 
 ```html
 <template>
-  <nut-avatar
-    size="large"
-    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  ></nut-avatar>
-  <nut-avatar
-    size="normal"
-    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  ></nut-avatar>
-  <nut-avatar
-    size="small"
-    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  ></nut-avatar>
+  <nut-avatar size="large">
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+  </nut-avatar>
+  <nut-avatar size="normal">
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+  </nut-avatar>
+  <nut-avatar size="small">
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+  </nut-avatar>
 </template>
 ```
 
@@ -48,8 +44,8 @@ Support two shapes：square、round
 
 ```html
 <template>
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-  <nut-avatar icon="my" shape="round"></nut-avatar>
+  <nut-avatar shape="square"><My /></nut-avatar>
+  <nut-avatar shape="round"><My /></nut-avatar>
 </template>
 ```
 
@@ -63,12 +59,11 @@ Support three types：picture、icon、letter
 
 ```html
 <template>
-  <nut-avatar
-    url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  >
+  <nut-avatar>
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
   </nut-avatar>
-  <nut-avatar icon="my"></nut-avatar>
-  <nut-avatar>N</nut-avatar>
+  <nut-avatar><My /></nut-avatar>
+  <nut-avatar>王</nut-avatar>
 </template>
 ```
 
@@ -82,8 +77,8 @@ Icon and letter types can have custom colors and background colors
 
 ```html
 <template>
-  <nut-avatar class="demo-avatar" icon="my" color="#fff" bg-color="#FA2C19"></nut-avatar>
-  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+  <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff"/></nut-avatar>
+  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
 </template>
 ```
 
@@ -96,10 +91,10 @@ Icon and letter types can have custom colors and background colors
 ```html
 <template>
   <nut-badge value="8">
-    <nut-avatar icon="my" shape="square"></nut-avatar>
+    <nut-avatar shape="square"><My /></nut-avatar>
   </nut-badge>
   <nut-badge dot>
-    <nut-avatar icon="my" shape="square"></nut-avatar>
+    <nut-avatar shape="square"><My /></nut-avatar>
   </nut-badge>
 </template>
 ```
@@ -113,25 +108,23 @@ Icon and letter types can have custom colors and background colors
 ```html
 <template>
   <nut-avatar-group span="-4">
-    <nut-avatar
-      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    >
+    <nut-avatar>
+      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
     </nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
   </nut-avatar-group>
   <nut-avatar-group
     max-count="3"
     max-color="#fff"
     max-bgColor="#498ff2"
   >
-    <nut-avatar
-      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    >
+    <nut-avatar>
+      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
     </nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
 ```
@@ -149,13 +142,12 @@ Icon and letter types can have custom colors and background colors
     zIndex="right"
     max-content="..."
   >
-    <nut-avatar
-      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    >
+    <nut-avatar>
+      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
     </nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
 ```
@@ -169,7 +161,7 @@ Icon and letter types can have custom colors and background colors
 ```html
 <template>
   <nut-cell>
-    <nut-avatar icon="my" @active-avatar="handleClick"></nut-avatar>
+    <nut-avatar @click="handleClick"><My /></nut-avatar>
   </nut-cell>
 </template>
 <script lang="ts">
@@ -196,12 +188,9 @@ Icon and letter types can have custom colors and background colors
 | Attribute | Description                                                        | Type   | Default |
 | -------- | ------------------------------------------------------------------- | ------ | ------ |
 | size     | The size of the avatar，eg `large`、`normal`、`small`，and numbers   | String ｜ Number | normal |
-| shape    | The shape of avatar，eg `square`、`round `    | String | round  |
-| color    | The colors of Icon and letter types        | String | #666   |
-| bg-color | The background colors of Icon and letter types      | String | #eee   |
-| url      | The address of the image for an image avatar or image element     | String | -   |
-| alt      | This attribute defines the alternative text describing the image     | String | -   |
-| icon     | Custom icon type for an icon avatar, Refer to the name attribute of Icon component  | String | -     |
+| shape    | shape of avatar，eg `square`、`round `    | String | round  |
+| color    | color of text        | String | #666   |
+| bg-color | background color      | String | #eee   |
 
 ### AvatarGroup Props
 
@@ -211,14 +200,13 @@ Icon and letter types can have custom colors and background colors
 | max-content  | When the number of avatars exceeds, a avatar folding element will appear，The content of this element can be `...`、`more`、`+N` | String | +N |
 | size         | The size of the avatar，eg `large`、`normal`、`small`，支持直接输入数字   | String ｜ Number | normal  |
 | shape        | The shape of avatar，eg `square`、`round`            | String | round  |
-| max-color    | The colors of Icon and letter types     | String | #666 |
-| max-bg-color  | The background colors of Icon and letter types        | String | #eee   |
+| max-color    | color of text     | String | #666 |
+| max-bg-color  | background color        | String | #eee   |
 | span         | Distance between avatars            | String | -8   |
 | zIndex       | Hierarchy direction between avatar group，eg `left`、`right`  | String | left     |
 
-### Avatar Events
+### Avatar Slots
 
-| Event         | Description                   | Arguments |
-| ------------- | ----------------------------- | --------- |
-| active-avatar | Emitted when cell is clicked  |  event    |
-| on-error       | Handler when img load error   |  event    |
+| Name         | Description                   |
+| ------------- | ----------------------------- |
+| default | default slot for img, icon or text  |

src/packages/__VUE/avatar/doc.md

@@ -8,11 +8,10 @@
 
 ```javascript
 import { createApp } from 'vue';
-import { Avatar, Icon } from '@nutui/nutui';
+import { Avatar } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Avatar);
-app.use(Icon);
 ```
 
 ### 基础用法
@@ -23,18 +22,15 @@ app.use(Icon);
 
 ```html
 <template>
-  <nut-avatar
-    size="large"
-    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  ></nut-avatar>
-  <nut-avatar
-    size="normal"
-    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  ></nut-avatar>
-  <nut-avatar
-    size="small"
-    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  ></nut-avatar>
+  <nut-avatar size="large">
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+  </nut-avatar>
+  <nut-avatar size="normal">
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+  </nut-avatar>
+  <nut-avatar size="small">
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+  </nut-avatar>
 </template>
 ```
 
@@ -48,8 +44,8 @@ app.use(Icon);
 
 ```html
 <template>
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-  <nut-avatar icon="my" shape="round"></nut-avatar>
+  <nut-avatar shape="square"><My /></nut-avatar>
+  <nut-avatar shape="round"><My /></nut-avatar>
 </template>
 ```
 
@@ -63,12 +59,11 @@ app.use(Icon);
 
 ```html
 <template>
-  <nut-avatar
-    url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  >
+  <nut-avatar>
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
   </nut-avatar>
-  <nut-avatar icon="my"></nut-avatar>
-  <nut-avatar>N</nut-avatar>
+  <nut-avatar><My /></nut-avatar>
+  <nut-avatar>王</nut-avatar>
 </template>
 ```
 
@@ -82,8 +77,8 @@ Icon 和字符型可以自定义颜色及背景色
 
 ```html
 <template>
-  <nut-avatar class="demo-avatar" icon="my" color="#fff" bg-color="#FA2C19"></nut-avatar>
-  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+  <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff"/></nut-avatar>
+  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
 </template>
 ```
 
@@ -96,10 +91,10 @@ Icon 和字符型可以自定义颜色及背景色
 ```html
 <template>
   <nut-badge value="8">
-    <nut-avatar icon="my" shape="square"></nut-avatar>
+    <nut-avatar shape="square"><My /></nut-avatar>
   </nut-badge>
   <nut-badge dot>
-    <nut-avatar icon="my" shape="square"></nut-avatar>
+    <nut-avatar shape="square"><My /></nut-avatar>
   </nut-badge>
 </template>
 ```
@@ -113,25 +108,23 @@ Icon 和字符型可以自定义颜色及背景色
 ```html
 <template>
   <nut-avatar-group span="-4">
-    <nut-avatar
-      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    >
+    <nut-avatar>
+      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
     </nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
   </nut-avatar-group>
   <nut-avatar-group
     max-count="3"
     max-color="#fff"
     max-bgColor="#498ff2"
   >
-    <nut-avatar
-      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    >
+    <nut-avatar>
+      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
     </nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
 ```
@@ -149,13 +142,12 @@ Icon 和字符型可以自定义颜色及背景色
     zIndex="right"
     max-content="..."
   >
-    <nut-avatar
-      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    >
+    <nut-avatar>
+      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
     </nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
 ```
@@ -169,7 +161,7 @@ Icon 和字符型可以自定义颜色及背景色
 ```html
 <template>
   <nut-cell>
-    <nut-avatar icon="my" @active-avatar="handleClick"></nut-avatar>
+    <nut-avatar @click="handleClick"><My /></nut-avatar>
   </nut-cell>
 </template>
 <script lang="ts">
@@ -197,11 +189,8 @@ Icon 和字符型可以自定义颜色及背景色
 | -------- | --------------------------------------------------------- | ------ | ------ |
 | size     | 头像的大小，可选值为：`large`、`normal`、`small`，支持输入数字   | String ｜ Number | normal |
 | shape    | 头像的形状，可选值为：`square`、`round `                      | String | round  |
-| color    | Icon、字符类型头像的颜色                                     | String | #666   |
-| bg-color | Icon、字符类型头像的背景色                                    | String | #eee   |
-| url      | 图片类型头像的地址                                           | String | -   |
-| alt      | 图片类型头像无法显示时的替代文本                               | String | -   |
-| icon     | Icon 类型头像图标, 类似 Icon 组件的 name 属性                 | String | -     |
+| color    | 字体颜色                                     | String | #666   |
+| bg-color | 背景色                                    | String | #eee   |
 
 ### AvatarGroup Props
 
@@ -211,13 +200,12 @@ Icon 和字符型可以自定义颜色及背景色
 | max-content  | 头像数量超出时，会出现一个头像折叠元素，该元素内容可为`...`、`more`、`+N` | String | +N |
 | size         | 头像的大小，可选值为：`large`、`normal`、`small`，支持直接输入数字   | String ｜ Number | normal |
 | shape        | 头像的形状，可选值为：`square`、`round`        | String | round  |
-| max-color    | Icon、字符类型头像的颜色                   | String | #666 |
-| max-bg-color  | Icon、字符类型头像的背景色                    | String | #eee   |
+| max-color    | 头像折叠元素的字体颜色                   | String | #666 |
+| max-bg-color  | 头像折叠元素的背景色                    | String | #eee   |
 | span         | 头像之间的间距               | String | -8   |
 | zIndex       | 组合头像之间的层级方向，可选值为：`left`、`right`  | String | left     |
-### Avatar Events
+### Avatar Slots
 
-| 字段             | 说明         | 回调参数 |
-| ---------------- | ------------ | -------- |
-| active-avatar | 点击头像触发事件    | event    |
-| on-error       | 图片加载失败的事件   | event    |
+|名称|描述|
+|--|--|
+|default|默认插槽，可放置图片、图标、文本等元素|

src/packages/__VUE/avatar/doc.taro.md

@@ -8,11 +8,10 @@
 
 ```javascript
 import { createApp } from 'vue';
-import { Avatar, Icon } from '@nutui/nutui-taro';
+import { Avatar } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Avatar);
-app.use(Icon);
 ```
 
 ### 基础用法
@@ -23,18 +22,15 @@ app.use(Icon);
 
 ```html
 <template>
-  <nut-avatar
-    size="large"
-    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  ></nut-avatar>
-  <nut-avatar
-    size="normal"
-    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  ></nut-avatar>
-  <nut-avatar
-    size="small"
-    icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  ></nut-avatar>
+  <nut-avatar size="large">
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+  </nut-avatar>
+  <nut-avatar size="normal">
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+  </nut-avatar>
+  <nut-avatar size="small">
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+  </nut-avatar>
 </template>
 ```
 
@@ -48,8 +44,8 @@ app.use(Icon);
 
 ```html
 <template>
-  <nut-avatar icon="my" shape="square"></nut-avatar>
-  <nut-avatar icon="my" shape="round"></nut-avatar>
+  <nut-avatar shape="square"><My /></nut-avatar>
+  <nut-avatar shape="round"><My /></nut-avatar>
 </template>
 ```
 
@@ -63,12 +59,11 @@ app.use(Icon);
 
 ```html
 <template>
-  <nut-avatar
-    url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-  >
+  <nut-avatar>
+    <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
   </nut-avatar>
-  <nut-avatar icon="my"></nut-avatar>
-  <nut-avatar>N</nut-avatar>
+  <nut-avatar><My /></nut-avatar>
+  <nut-avatar>王</nut-avatar>
 </template>
 ```
 
@@ -82,8 +77,8 @@ Icon 和字符型可以自定义颜色及背景色
 
 ```html
 <template>
-  <nut-avatar class="demo-avatar" icon="my" color="#fff" bg-color="#FA2C19"></nut-avatar>
-  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+  <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff"/></nut-avatar>
+  <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
 </template>
 ```
 
@@ -96,10 +91,10 @@ Icon 和字符型可以自定义颜色及背景色
 ```html
 <template>
   <nut-badge value="8">
-    <nut-avatar icon="my" shape="square"></nut-avatar>
+    <nut-avatar shape="square"><My /></nut-avatar>
   </nut-badge>
   <nut-badge dot>
-    <nut-avatar icon="my" shape="square"></nut-avatar>
+    <nut-avatar shape="square"><My /></nut-avatar>
   </nut-badge>
 </template>
 ```
@@ -113,25 +108,23 @@ Icon 和字符型可以自定义颜色及背景色
 ```html
 <template>
   <nut-avatar-group span="-4">
-    <nut-avatar
-      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    >
+    <nut-avatar>
+      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
     </nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
   </nut-avatar-group>
   <nut-avatar-group
     max-count="3"
     max-color="#fff"
     max-bgColor="#498ff2"
   >
-    <nut-avatar
-      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    >
+    <nut-avatar>
+      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
     </nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
-    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
 ```
@@ -149,13 +142,12 @@ Icon 和字符型可以自定义颜色及背景色
     zIndex="right"
     max-content="..."
   >
-    <nut-avatar
-      url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-    >
+    <nut-avatar>
+      <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
     </nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
     <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-    <nut-avatar icon="my"></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
 ```
@@ -169,7 +161,7 @@ Icon 和字符型可以自定义颜色及背景色
 ```html
 <template>
   <nut-cell>
-    <nut-avatar icon="my" @active-avatar="handleClick"></nut-avatar>
+    <nut-avatar @click="handleClick"><My /></nut-avatar>
   </nut-cell>
 </template>
 <script lang="ts">
@@ -197,11 +189,8 @@ Icon 和字符型可以自定义颜色及背景色
 | -------- | --------------------------------------------------------- | ------ | ------ |
 | size     | 头像的大小，可选值为：`large`、`normal`、`small`，支持输入数字   | String ｜ Number | normal |
 | shape    | 头像的形状，可选值为：`square`、`round `                      | String | round  |
-| color    | Icon、字符类型头像的颜色                                     | String | #666   |
-| bg-color | Icon、字符类型头像的背景色                                    | String | #eee   |
-| url      | 图片类型头像的地址                                           | String | -   |
-| alt      | 图片类型头像无法显示时的替代文本                               | String | -   |
-| icon     | Icon 类型头像图标, 类似 Icon 组件的 name 属性                 | String | -     |
+| color    | 字体颜色                                     | String | #666   |
+| bg-color | 背景色                                    | String | #eee   |
 
 ### AvatarGroup Props
 
@@ -211,13 +200,12 @@ Icon 和字符型可以自定义颜色及背景色
 | max-content  | 头像数量超出时，会出现一个头像折叠元素，该元素内容可为`...`、`more`、`+N` | String | +N |
 | size         | 头像的大小，可选值为：`large`、`normal`、`small`，支持直接输入数字   | String ｜ Number | normal |
 | shape        | 头像的形状，可选值为：`square`、`round`        | String | round  |
-| max-color    | Icon、字符类型头像的颜色                   | String | #666 |
-| max-bg-color  | Icon、字符类型头像的背景色                    | String | #eee   |
+| max-color    | 头像折叠元素的字体颜色                   | String | #666 |
+| max-bg-color  | 头像折叠元素的背景色                    | String | #eee   |
 | span         | 头像之间的间距               | String | -8   |
 | zIndex       | 组合头像之间的层级方向，可选值为：`left`、`right`  | String | left     |
-### Avatar Events
+### Avatar Slots
 
-| 字段             | 说明         | 回调参数 |
-| ---------------- | ------------ | -------- |
-| active-avatar | 点击头像触发事件    | event    |
-| on-error       | 图片加载失败的事件   | event    |
+|名称|描述|
+|--|--|
+|default|默认插槽，可放置图片、图标、文本等元素|

src/packages/__VUE/avatar/index.scss

@@ -6,28 +6,17 @@
   position: relative;
   flex: 0 0 auto; // 防止被压缩
   text-align: center;
-  > img {
+  img {
     width: 100%;
     height: 100%;
   }
-  .nut-avatar__icon {
+  .nut-icon {
     background-size: 100% 100%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
-  .nut-icon__img {
-    width: 100%;
-    height: 100%;
-  }
-  .nut-avatar__text {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    overflow: hidden;
-  }
 }
 .nut-avatar-large {
   width: $avatar-large-width;

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

@@ -7,25 +7,15 @@
     v-if="showMax || !avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount"
   >
     <template v-if="!avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount">
-      <template v-if="url">
-        <img :src="url" :alt="alt" @error="onError" />
-      </template>
-      <template v-else-if="icon">
-        <nut-icon v-bind="$attrs" class="nut-avatar__icon" :name="iconStyles"></nut-icon>
-      </template>
-      <view class="nut-avatar__text" v-if="isShowText">
+      <view>
         <slot></slot>
       </view>
     </template>
     <!-- 折叠头像 -->
-    <template v-if="showMax">
-      <view class="nut-avatar__text">
-        {{
-          avatarGroup?.props?.maxContent
-            ? avatarGroup?.props?.maxContent
-            : `+ ${maxIndex - avatarGroup?.props?.maxCount}`
-        }}
-      </view>
+    <template v-if="showMax && avatarGroup?.props?.maxCount">
+      {{
+        avatarGroup?.props?.maxContent ? avatarGroup?.props?.maxContent : `+ ${maxIndex - avatarGroup?.props?.maxCount}`
+      }}
     </template>
   </view>
 </template>
@@ -50,23 +40,10 @@ export default create({
     color: {
       type: String,
       default: '#666'
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    alt: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
     }
   },
-  emits: ['active-avatar', 'onError'],
-  setup(props, { emit, slots }) {
-    const { size, shape, bgColor, color, icon } = toRefs(props);
+  setup(props) {
+    const { size, shape, bgColor, color } = toRefs(props);
     const sizeValue = ['large', 'normal', 'small'];
     const avatarGroup: any = inject('avatarGroup', null);
     const avatarRef = ref(null) as Ref;
@@ -113,14 +90,6 @@ export default create({
       };
     });
 
-    const iconStyles = computed(() => {
-      return icon?.value ? icon.value : '';
-    });
-
-    const isShowText = computed(() => {
-      return slots.default;
-    });
-
     const avatarLength = (children: any) => {
       state.maxIndex = children.length;
       for (let i = 0; i < children.length; i++) {
@@ -135,22 +104,11 @@ export default create({
       }
     };
 
-    const activeAvatar = (event: MouseEvent) => {
-      emit('active-avatar', event);
-    };
-
-    const onError = () => {
-      emit('onError');
-    };
-
     return {
       classes,
       styles,
-      iconStyles,
       isShowText,
       maxStyles,
-      activeAvatar,
-      onError,
       avatarGroup,
       visible,
       avatarRef,

src/packages/__VUE/avatar/index.vue

@@ -2,30 +2,17 @@
   <view
     :style="!showMax ? styles : maxStyles"
     :class="classes"
-    @click="activeAvatar"
     ref="avatarRef"
     v-if="showMax || !avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount"
   >
     <template v-if="!avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount">
-      <template v-if="url">
-        <img :src="url" :alt="alt" @error="onError" />
-      </template>
-      <template v-else-if="icon">
-        <nut-icon v-bind="$attrs" class="nut-avatar__icon" :name="iconStyles"></nut-icon>
-      </template>
-      <view class="nut-avatar__text" v-if="isShowText">
-        <slot></slot>
-      </view>
+      <slot></slot>
     </template>
     <!-- 折叠头像 -->
-    <template v-if="showMax">
-      <view class="nut-avatar__text">
-        {{
-          avatarGroup?.props?.maxContent
-            ? avatarGroup?.props?.maxContent
-            : `+ ${maxIndex - avatarGroup?.props?.maxCount}`
-        }}
-      </view>
+    <template v-if="showMax && avatarGroup?.props?.maxCount">
+      {{
+        avatarGroup?.props?.maxContent ? avatarGroup?.props?.maxContent : `+ ${maxIndex - avatarGroup?.props?.maxCount}`
+      }}
     </template>
   </view>
 </template>
@@ -50,23 +37,10 @@ export default create({
     color: {
       type: String,
       default: '#666'
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    alt: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
     }
   },
-  emits: ['active-avatar', 'onError'],
-  setup(props, { emit, slots }) {
-    const { size, shape, bgColor, color, icon } = toRefs(props);
+  setup(props) {
+    const { size, shape, bgColor, color } = toRefs(props);
     const sizeValue = ['large', 'normal', 'small'];
     const avatarGroup: any = inject('avatarGroup', null);
     const avatarRef = ref(null) as Ref;
@@ -113,14 +87,6 @@ export default create({
       };
     });
 
-    const iconStyles = computed(() => {
-      return icon?.value ? icon.value : '';
-    });
-
-    const isShowText = computed(() => {
-      return slots.default;
-    });
-
     const avatarLength = (children: any) => {
       state.maxIndex = children.length;
       for (let i = 0; i < children.length; i++) {
@@ -136,22 +102,10 @@ export default create({
       }
     };
 
-    const activeAvatar = (event: MouseEvent) => {
-      emit('active-avatar', event);
-    };
-
-    const onError = () => {
-      emit('onError');
-    };
-
     return {
       classes,
       styles,
-      iconStyles,
-      isShowText,
       maxStyles,
-      activeAvatar,
-      onError,
       avatarGroup,
       visible,
       avatarRef,

src/packages/__VUE/grid/demo.vue

@@ -75,10 +75,11 @@
     <h2>{{ translate('customContent') }}</h2>
     <nut-grid :border="false">
       <nut-grid-item v-for="i in 4" :key="i">
-        <nut-avatar
-          size="large"
-          icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-        />
+        <nut-avatar size="large">
+          <img
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+          />
+        </nut-avatar>
       </nut-grid-item>
     </nut-grid>
   </div>

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

@@ -151,10 +151,11 @@ app.use(GridItem);
 <template>
   <nut-grid :border="false">
     <nut-grid-item v-for="i in 4" :key="i">
-      <nut-avatar
-        size="large"
-        icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      />
+      <nut-avatar size="large">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
+      </nut-avatar>
     </nut-grid-item>
   </nut-grid>
 </template>

src/packages/__VUE/grid/doc.md

@@ -151,10 +151,11 @@ app.use(GridItem);
 <template>
   <nut-grid :border="false">
     <nut-grid-item v-for="i in 4" :key="i">
-      <nut-avatar
-        size="large"
-        icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      />
+      <nut-avatar size="large">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
+      </nut-avatar>
     </nut-grid-item>
   </nut-grid>
 </template>

src/packages/__VUE/grid/doc.taro.md

@@ -151,10 +151,11 @@ app.use(GridItem);
 <template>
   <nut-grid :border="false">
     <nut-grid-item v-for="i in 4" :key="i">
-      <nut-avatar
-        size="large"
-        icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      />
+      <nut-avatar size="large">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
+      </nut-avatar>
     </nut-grid-item>
   </nut-grid>
 </template>

src/packages/__VUE/skeleton/demo.vue

@@ -29,10 +29,11 @@
 
       <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
         <view class="container">
-          <nut-avatar
-            size="50"
-            icon="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-          />
+          <nut-avatar size="50">
+            <img
+              src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+            />
+          </nut-avatar>
           <view class="right-content">
             <view class="title">NutUI</view>
             <view class="desc">{{ translate('desc') }}</view>

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

@@ -93,10 +93,11 @@ app.use(Skeleton);
     <nut-switch v-model="checked" size="15px" />
     <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
       <div class="container">
-        <nut-avatar
-          size="50"
-          icon="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-        />
+        <nut-avatar size="50">
+          <img
+            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+          />
+        </nut-avatar>
       <div class="right-content">
         <div class="title">NutUI</div>
         <div class="desc"

src/packages/__VUE/skeleton/doc.md

@@ -94,10 +94,11 @@ app.use(Skeleton);
     <nut-switch v-model="checked" size="15px" />
     <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
       <div class="container">
-        <nut-avatar
-          size="50"
-          icon="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-        />
+        <nut-avatar size="50">
+          <img
+            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+          />
+        </nut-avatar>
       <div class="right-content">
         <div class="title">NutUI</div>
         <div class="desc"

src/packages/__VUE/skeleton/doc.taro.md

@@ -94,10 +94,11 @@ app.use(Skeleton);
     <nut-switch v-model="checked" size="15px" />
     <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
       <div class="container">
-        <nut-avatar
-          size="50"
-          icon="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-        />
+        <nut-avatar size="50">
+          <img
+            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+          />
+        </nut-avatar>
       <div class="right-content">
         <div class="title">NutUI</div>
         <div class="desc"

src/sites/mobile-taro/vue/src/exhibition/pages/avatar/index.vue

@@ -2,105 +2,107 @@
   <div class="demo full">
     <h2>支持三种尺寸：small、normal、large</h2>
     <nut-cell>
-      <nut-avatar
-        size="large"
-        url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      >
+      <nut-avatar size="large">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
       </nut-avatar>
-      <nut-avatar
-        size="normal"
-        url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      >
+      <nut-avatar size="normal">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
       </nut-avatar>
-      <nut-avatar
-        size="small"
-        url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      >
+      <nut-avatar size="small">
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
       </nut-avatar>
     </nut-cell>
     <h2>支持两种形状：square、round</h2>
     <nut-cell>
-      <nut-avatar icon="my" shape="square"></nut-avatar>
-      <nut-avatar icon="my" shape="round"></nut-avatar>
+      <nut-avatar shape="square"><My /></nut-avatar>
+      <nut-avatar shape="round"><My /></nut-avatar>
     </nut-cell>
     <h2>支持三种类型：图片、Icon 以及字符</h2>
     <nut-cell>
-      <nut-avatar
-        url="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-      >
+      <nut-avatar>
+        <img
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        />
       </nut-avatar>
-      <nut-avatar icon="my"></nut-avatar>
-      <nut-avatar>N</nut-avatar>
+      <nut-avatar><My /></nut-avatar>
+      <nut-avatar>王</nut-avatar>
     </nut-cell>
     <h2>Icon 和字符型可以自定义颜色及背景色</h2>
     <nut-cell>
-      <nut-avatar class="demo-avatar" icon="my" color="#fff" bg-color="#FA2C19"></nut-avatar>
-      <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+      <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff" /></nut-avatar>
+      <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
     </nut-cell>
     <h2>带徽标的头像</h2>
     <nut-cell>
       <nut-badge value="8">
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"><My /></nut-avatar>
       </nut-badge>
       <nut-badge dot>
-        <nut-avatar icon="my" shape="square"></nut-avatar>
+        <nut-avatar shape="square"><My /></nut-avatar>
       </nut-badge>
     </nut-cell>
     <h2>头像组合展现</h2>
     <nut-cell>
       <nut-avatar-group span="-4">
-        <nut-avatar
-          url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          type="round"
-        >
+        <nut-avatar>
+          <img
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+          />
         </nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
+        <nut-avatar><My /></nut-avatar>
+        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
       </nut-avatar-group>
     </nut-cell>
 
     <nut-cell>
       <nut-avatar-group max-count="3" max-color="#fff" max-bgColor="#498ff2">
-        <nut-avatar
-          url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        >
+        <nut-avatar>
+          <img
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+          />
         </nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
+        <nut-avatar><My /></nut-avatar>
+        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+        <nut-avatar><My /></nut-avatar>
       </nut-avatar-group>
     </nut-cell>
     <h2>组合头像可控制层级方向</h2>
     <nut-cell>
       <nut-avatar-group max-count="3" zIndex="right" max-content="...">
-        <nut-avatar
-          url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        >
+        <nut-avatar>
+          <img
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+          />
         </nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">U</nut-avatar>
-        <nut-avatar icon="my"></nut-avatar>
+        <nut-avatar><My /></nut-avatar>
+        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+        <nut-avatar><My /></nut-avatar>
       </nut-avatar-group>
     </nut-cell>
 
     <h2>点击头像触发事件</h2>
     <nut-cell>
-      <nut-avatar icon="my" @active-avatar="handleClick"></nut-avatar>
+      <nut-avatar @click="handleClick"><My /></nut-avatar>
     </nut-cell>
   </div>
 </template>
 <script lang="ts">
+import { My } from '@nutui/icons-vue-taro';
 export default {
+  components: { My },
   props: {},
   setup() {
     const handleClick = () => {
       console.log('触发点击头像');
     };
-    const onError = () => {
-      console.log('触发error头像');
-    };
 
-    return { handleClick, onError };
+    return { handleClick };
   }
 };
 </script>

src/sites/mobile-taro/vue/src/exhibition/pages/skeleton/index.vue

@@ -24,10 +24,11 @@
       <nut-switch v-model="checked" size="15px" />
       <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
         <view class="container">
-          <nut-avatar
-            size="50"
-            icon="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-          />
+          <nut-avatar size="50">
+            <img
+              src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+            />
+          </nut-avatar>
           <view class="right-content">
             <view class="title">NutUI</view>
             <view class="desc"

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

@@ -72,10 +72,11 @@
     <h2>自定义内容</h2>
     <nut-grid :border="false">
       <nut-grid-item v-for="i in 4" :key="i">
-        <nut-avatar
-          size="large"
-          icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-        />
+        <nut-avatar size="large">
+          <img
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+          />
+        </nut-avatar>
       </nut-grid-item>
     </nut-grid>
   </div>