feat(Image): add icon-size prop (#8395)

src/image/Image.tsx

@@ -1,4 +1,3 @@
-// Utils
 import {
   ref,
   watch,
@@ -9,6 +8,8 @@ import {
   defineComponent,
   getCurrentInstance,
 } from 'vue';
+
+// Utils
 import {
   isDef,
   addUnit,
@@ -36,6 +37,7 @@ export default defineComponent({
     height: [Number, String],
     radius: [Number, String],
     lazyLoad: Boolean,
+    iconSize: [Number, String],
     iconPrefix: String,
     showError: {
       type: Boolean,
@@ -110,6 +112,7 @@ export default defineComponent({
 
       return (
         <Icon
+          size={props.iconSize}
           name={props.loadingIcon}
           class={bem('loading-icon')}
           classPrefix={props.iconPrefix}
@@ -124,6 +127,7 @@ export default defineComponent({
 
       return (
         <Icon
+          size={props.iconSize}
           name={props.errorIcon}
           class={bem('error-icon')}
           classPrefix={props.iconPrefix}

src/image/README.md

@@ -81,6 +81,7 @@ app.use(Lazyload);
 | show-loading | Whether to show loading placeholder | _boolean_ | `true` |
 | error-icon | Error icon | _string_ | `photo-fail` |
 | loading-icon | Loading icon | _string_ | `photo` |
+| icon-size `v3.0.11` | Icon size | _number \| string_ | `32px` |
 | icon-prefix | Icon className prefix | _string_ | `van-icon` |
 
 ### fit optional value

src/image/README.zh-CN.md

@@ -113,6 +113,7 @@ app.use(Lazyload);
 | show-loading | 是否展示图片加载中提示 | _boolean_ | `true` |
 | error-icon | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-fail` |
 | loading-icon | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo` |
+| icon-size `v3.0.11` | 加载图标和失败图标的大小 | _number \| string_ | `32px` |
 | icon-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 
 ### 图片填充模式 

src/image/test/index.spec.ts

@@ -137,6 +137,30 @@ test('should change border radius when using border-radius prop', () => {
   expect(wrapper.style.borderRadius).toEqual('3px');
 });
 
+test('should change loading icon size when using icon-size prop', () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      iconSize: '3rem',
+      loadingIcon: 'success',
+    },
+  });
+  expect(wrapper.find('.van-image__loading-icon').style.fontSize).toEqual(
+    '3rem'
+  );
+});
+
+test('should change error icon size when using icon-size prop', async () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      src: IMAGE_URL,
+      iconSize: '3rem',
+      errorIcon: 'error',
+    },
+  });
+  await wrapper.find('img').trigger('error');
+  expect(wrapper.find('.van-image__error-icon').style.fontSize).toEqual('3rem');
+});
+
 test('should render default slot correctly', () => {
   const wrapper = mount(VanImage, {
     props: {