chore(image): use icons-vue component (#1940)

* chore(image): use icons-vue component

* chore(image): icon add name ,update doc

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

@@ -1,11 +1,13 @@
 import { config, mount } from '@vue/test-utils';
 import { h, nextTick } from 'vue';
-import Image from '../index.vue';
-import NutIcon from '../../icon/index.vue';
-
+import ImagePage from '../index.vue';
+import { Loading, CircleClose, Image, ImageError } from '@nutui/icons-vue';
 beforeAll(() => {
   config.global.components = {
-    NutIcon
+    Loading,
+    CircleClose,
+    Image,
+    ImageError
   };
 });
 
@@ -13,8 +15,8 @@ afterAll(() => {
   config.global.components = {};
 });
 
-test('image render', async () => {
-  const wrapper = mount(Image, {
+test('ImagePage render', async () => {
+  const wrapper = mount(ImagePage, {
     props: {
       src: '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg',
       width: '100',
@@ -26,8 +28,8 @@ test('image render', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('image load error', async () => {
-  const wrapper = mount(Image, {
+test('ImagePage load error', async () => {
+  const wrapper = mount(ImagePage, {
     props: {
       src: 'https://x',
       width: '100',
@@ -40,8 +42,8 @@ test('image load error', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('image loading', async () => {
-  const wrapper = mount(Image, {
+test('ImagePage loading', async () => {
+  const wrapper = mount(ImagePage, {
     props: {
       src: '',
       width: '100',
@@ -54,8 +56,8 @@ test('image loading', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('image render Round', async () => {
-  const wrapper = mount(Image, {
+test('ImagePage render Round', async () => {
+  const wrapper = mount(ImagePage, {
     props: {
       src: '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg',
       width: '100',

src/packages/__VUE/image/demo.vue

@@ -52,7 +52,7 @@
         <nut-col :span="8">
           <nut-image width="100" height="100" showLoading>
             <template #loading>
-              <nut-icon name="loading"></nut-icon>
+              <Loading width="16px" height="16px" name="loading"></Loading>
             </template>
           </nut-image>
           <div class="text">自定义</div>
@@ -69,7 +69,9 @@
         </nut-col>
         <nut-col :span="8">
           <nut-image src="https://x" width="100" height="100" showLoading>
-            <nut-icon name="circle-close"></nut-icon>
+            <template #error>
+              <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+            </template>
           </nut-image>
           <div class="text">自定义</div>
         </nut-col>
@@ -80,6 +82,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { Loading, CircleClose } from '@nutui/icons-vue';
 const { createDemo, translate } = createComponent('image');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -103,6 +106,10 @@ const initTranslate = () =>
   });
 export default createDemo({
   props: {},
+  components: {
+    Loading,
+    CircleClose
+  },
   setup() {
     initTranslate();
     const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');

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

@@ -96,7 +96,7 @@ The Image component provides a default loading prompt and supports custom conten
 <template>
   <nut-image width="100" height="100" showLoading>
     <template #loading>
-      <nut-icon name="loading"></nut-icon>
+      <Loading width="16px" height="16px" name="loading"></Loading>
     </template>
   </nut-image>
 </template>
@@ -113,7 +113,9 @@ The Image component provides a default loading failure warning and supports cust
 ```html
 <template>
   <nut-image src="https://x" width="100" height="100" showLoading>
-    <template #error> <nut-icon name="circle-close"></nut-icon> </template>
+    <template #error>
+      <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+    </template>
   </nut-image>
 </template>
 ```

src/packages/__VUE/image/doc.md

@@ -95,7 +95,7 @@ app.use();
 <template>
   <nut-image width="100" height="100" showLoading>
     <template #loading>
-      <nut-icon name="loading"></nut-icon>
+      <Loading width="16px" height="16px" name="loading"></Loading>
     </template>
   </nut-image>
 </template>
@@ -112,7 +112,9 @@ app.use();
 ```html
 <template>
   <nut-image src="https://x" width="100" height="100" showError>
-    <template #error> 加载失败 </template>
+    <template #error> 
+      <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+    </template>
   </nut-image>
 </template>
 ```

src/packages/__VUE/image/index.vue

@@ -3,12 +3,11 @@
     <img class="nut-img" :src="src" :alt="alt" @load="load" @error="error" :style="styles" />
 
     <view class="nut-img-loading" v-if="loading">
-      <nut-icon name="image" v-if="!slotLoding"></nut-icon>
+      <Image v-if="!slotLoding" width="16px" height="20px" name="image"></Image>
       <slot name="loading"></slot>
     </view>
-
     <view class="nut-img-error" v-if="isError && !loading">
-      <nut-icon name="image-error" v-if="!slotError"></nut-icon>
+      <ImageError v-if="!slotError" width="16px" height="20px" name="imageError"></ImageError>
       <slot name="error"></slot>
     </view>
   </view>
@@ -17,6 +16,7 @@
 import { reactive, toRefs, computed, PropType, useSlots, watch, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '../../utils/pxCheck';
+import { Image, ImageError } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('image');
 export default create({
   props: {
@@ -55,6 +55,10 @@ export default create({
       default: true
     }
   },
+  components: {
+    Image,
+    ImageError
+  },
   emits: ['click', 'load', 'error'],
 
   setup(props, { emit }) {