[improvement] Icon: use image component to display image (#3515)

packages/icon/index.less

@@ -2,19 +2,8 @@
 @import '@vant/icons/src/index.less';
 
 .van-icon {
-  &--image {
+  &__image {
     width: 1em;
     height: 1em;
-
-    img {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      max-width: 100%;
-      max-height: 100%;
-      margin: auto;
-    }
   }
 }

packages/icon/index.tsx

@@ -1,6 +1,7 @@
 import { use, suffixPx } from '../utils';
 import { inherit } from '../utils/functional';
 import Info from '../info';
+import Image from '../image';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -19,7 +20,7 @@ export type IconEvents = {
   onClick?(event: Event): void;
 };
 
-const [sfc] = use('icon');
+const [sfc, bem] = use('icon');
 
 function isImage(name?: string): boolean {
   return name ? name.indexOf('/') !== -1 : false;
@@ -31,14 +32,11 @@ function Icon(
   slots: DefaultSlots,
   ctx: RenderContext<IconProps>
 ) {
-  const urlIcon = isImage(props.name);
+  const imageIcon = isImage(props.name);
 
   return (
     <props.tag
-      class={[
-        props.classPrefix,
-        urlIcon ? 'van-icon--image' : `${props.classPrefix}-${props.name}`
-      ]}
+      class={[props.classPrefix, imageIcon ? '' : `${props.classPrefix}-${props.name}`]}
       style={{
         color: props.color,
         fontSize: suffixPx(props.size)
@@ -46,7 +44,7 @@ function Icon(
       {...inherit(ctx, true)}
     >
       {slots.default && slots.default()}
-      {urlIcon && <img src={props.name} />}
+      {imageIcon && <Image class={bem('image')} src={props.name} />}
       <Info info={props.info} />
     </props.tag>
   );
@@ -63,7 +61,7 @@ Icon.props = {
   },
   classPrefix: {
     type: String,
-    default: 'van-icon'
+    default: bem()
   }
 };
 

packages/icon/test/__snapshots__/index.spec.js.snap

@@ -11,13 +11,23 @@ exports[`render icon with builtin icon name 1`] = `
 `;
 
 exports[`render icon with local image 1`] = `
-<i class="van-icon van-icon--image"><img src="/assets/icon.jpg">
-  <!----></i>
+<i class="van-icon">
+  <div class="van-image van-icon__image"><img src="/assets/icon.jpg" class="van-image__img">
+    <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+        <!----></i></div>
+  </div>
+  <!---->
+</i>
 `;
 
 exports[`render icon with url name 1`] = `
-<i class="van-icon van-icon--image"><img src="https://img.yzcdn.com/icon.jpg">
-  <!----></i>
+<i class="van-icon">
+  <div class="van-image van-icon__image"><img src="https://img.yzcdn.com/icon.jpg" class="van-image__img">
+    <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+        <!----></i></div>
+  </div>
+  <!---->
+</i>
 `;
 
 exports[`size without unit 1`] = `