From 800d9a6af984a842be49c1f5f0b31db5874a305e Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 5 Apr 2022 09:50:26 +0800
Subject: [PATCH] feat(ShareSheet): no longer rely on CDN images (#10469)

---
 packages/vant/src/share-sheet/ShareSheet.tsx | 41 +++++++++--------
 packages/vant/src/share-sheet/index.less     | 46 +++++++++++++++++++-
 2 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/packages/vant/src/share-sheet/ShareSheet.tsx b/packages/vant/src/share-sheet/ShareSheet.tsx
index 071ea6f5c..bd9ef5671 100644
--- a/packages/vant/src/share-sheet/ShareSheet.tsx
+++ b/packages/vant/src/share-sheet/ShareSheet.tsx
@@ -12,6 +12,7 @@ import {
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 // Components
+import { Icon } from '../icon';
 import { Popup } from '../popup';
 
 export type ShareSheetOption = {
@@ -23,17 +24,6 @@ export type ShareSheetOption = {
 
 export type ShareSheetOptions = ShareSheetOption[] | ShareSheetOption[][];
 
-const PRESET_ICONS = [
-  'qq',
-  'link',
-  'weibo',
-  'wechat',
-  'poster',
-  'qrcode',
-  'weapp-qrcode',
-  'wechat-moments',
-];
-
 const popupInheritKeys = [
   ...popupSharedPropKeys,
   'round',
@@ -41,12 +31,16 @@ const popupInheritKeys = [
   'safeAreaInsetBottom',
 ] as const;
 
-function getIconURL(icon: string) {
-  if (PRESET_ICONS.includes(icon)) {
-    return `https://img.yzcdn.cn/vant/share-sheet-${icon}.png`;
-  }
-  return icon;
-}
+const iconMap: Record<string, string> = {
+  qq: 'qq',
+  link: 'link-o',
+  weibo: 'weibo',
+  qrcode: 'qr',
+  poster: 'photo-o',
+  wechat: 'wechat',
+  'weapp-qrcode': 'miniprogram-o',
+  'wechat-moments': 'wechat-moments',
+};
 
 const [name, bem, t] = createNamespace('share-sheet');
 
@@ -98,6 +92,17 @@ export default defineComponent({
       }
     };
 
+    const renderIcon = (icon: string) => {
+      if (iconMap[icon]) {
+        return (
+          <div class={bem('icon', [icon])}>
+            <Icon name={iconMap[icon] || icon} />
+          </div>
+        );
+      }
+      return <img src={icon} class={bem('image-icon')} />;
+    };
+
     const renderOption = (option: ShareSheetOption, index: number) => {
       const { name, icon, className, description } = option;
       return (
@@ -107,7 +112,7 @@ export default defineComponent({
           class={[bem('option'), className, HAPTICS_FEEDBACK]}
           onClick={() => onSelect(option, index)}
         >
-          <img src={getIconURL(icon)} class={bem('icon')} />
+          {renderIcon(icon)}
           {name && <span class={bem('name')}>{name}</span>}
           {description && (
             <span class={bem('option-description')}>{description}</span>
diff --git a/packages/vant/src/share-sheet/index.less b/packages/vant/src/share-sheet/index.less
index d6b45fc7c..fa8e46e1f 100644
--- a/packages/vant/src/share-sheet/index.less
+++ b/packages/vant/src/share-sheet/index.less
@@ -65,12 +65,56 @@
     user-select: none;
   }
 
-  &__icon {
+  &__icon,
+  &__image-icon {
     width: var(--van-share-sheet-icon-size);
     height: var(--van-share-sheet-icon-size);
     margin: 0 var(--van-padding-md);
   }
 
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--van-gray-7);
+    border-radius: 100%;
+    background-color: var(--van-gray-2);
+
+    &--link,
+    &--poster,
+    &--qrcode {
+      font-size: 26px;
+    }
+
+    &--weapp-qrcode {
+      font-size: 28px;
+    }
+
+    &--qq,
+    &--weibo,
+    &--wechat,
+    &--wechat-moments {
+      font-size: 30px;
+      color: var(--van-white);
+    }
+
+    &--qq {
+      background-color: #38b9fa;
+    }
+
+    &--wechat {
+      background-color: #0bc15f;
+    }
+
+    &--weibo {
+      background-color: #ee575e;
+    }
+
+    &--wechat-moments {
+      background-color: #7bc845;
+    }
+  }
+
   &__name {
     margin-top: var(--van-padding-xs);
     padding: 0 var(--van-padding-base);