feat(Image): add icon-prefix prop (#7457)

src/image/README.md

@@ -77,6 +77,7 @@ Vue.use(Lazyload);
 | show-loading | Whether to show loading placeholder | _boolean_ | `true` |
 | error-icon `v2.4.2` | Error icon | _string_ | `photo-fail` |
 | loading-icon `v2.4.2` | Loading icon | _string_ | `photo` |
+| icon-prefix `v2.10.12` | Icon className prefix | _string_ | `van-icon` |
 
 ### fit optional value
 

src/image/README.zh-CN.md

@@ -109,6 +109,7 @@ Vue.use(Lazyload);
 | show-loading | 是否展示图片加载中提示 | _boolean_ | `true` |
 | error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-fail` |
 | loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo` |
+| icon-prefix `v2.10.12` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 
 ### 图片填充模式 
 

src/image/index.js

@@ -13,6 +13,7 @@ export default createComponent({
     height: [Number, String],
     radius: [Number, String],
     lazyLoad: Boolean,
+    iconPrefix: String,
     showError: {
       type: Boolean,
       default: true,
@@ -117,7 +118,11 @@ export default createComponent({
         return (
           <div class={bem('loading')}>
             {this.slots('loading') || (
-              <Icon name={this.loadingIcon} class={bem('loading-icon')} />
+              <Icon
+                name={this.loadingIcon}
+                class={bem('loading-icon')}
+                classPrefix={this.iconPrefix}
+              />
             )}
           </div>
         );
@@ -127,7 +132,11 @@ export default createComponent({
         return (
           <div class={bem('error')}>
             {this.slots('error') || (
-              <Icon name={this.errorIcon} class={bem('error-icon')} />
+              <Icon
+                name={this.errorIcon}
+                class={bem('error-icon')}
+                classPrefix={this.iconPrefix}
+              />
             )}
           </div>
         );

src/image/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`apply icon-prefix prop to error-icon 1`] = `
+<div class="van-image">
+  <div class="van-image__error"><i class="my-icon my-icon-error van-image__error-icon">
+      <!----></i></div>
+</div>
+`;
+
+exports[`apply icon-prefix prop to loading-icon 1`] = `
+<div class="van-image"><img class="van-image__img">
+  <div class="van-image__loading"><i class="my-icon my-icon-success van-image__loading-icon">
+      <!----></i></div>
+</div>
+`;
+
 exports[`default slot 1`] = `
 <div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
   <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">

src/image/test/index.spec.js

@@ -147,6 +147,31 @@ test('loading-icon prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('apply icon-prefix prop to error-icon', () => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      errorIcon: 'error',
+      iconPrefix: 'my-icon',
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+    },
+  });
+
+  wrapper.find('img').trigger('error');
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('apply icon-prefix prop to loading-icon', () => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      loadingIcon: 'success',
+      iconPrefix: 'my-icon',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('radius prop', () => {
   const wrapper = mount(VanImage, {
     propsData: {