From 28885fdee501e1b752d110e17cddc4a06b77d4a1 Mon Sep 17 00:00:00 2001
From: MrXwq <43991889+MrXwq@users.noreply.github.com>
Date: Fri, 31 Mar 2023 08:57:06 +0800
Subject: [PATCH] fix(ShareSheet): allow custom icon (#11709)

Co-authored-by: xuwenqiang <xuwenqiang@kanzhun.com>
---
 packages/vant/src/share-sheet/ShareSheet.tsx  | 16 +++++++++-------
 packages/vant/src/share-sheet/demo/index.vue  |  1 +
 .../vant/src/share-sheet/test/index.spec.ts   | 19 +++++++++++++++++++
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/vant/src/share-sheet/ShareSheet.tsx b/packages/vant/src/share-sheet/ShareSheet.tsx
index 059096c6c..3b9fec7ad 100644
--- a/packages/vant/src/share-sheet/ShareSheet.tsx
+++ b/packages/vant/src/share-sheet/ShareSheet.tsx
@@ -24,6 +24,8 @@ export type ShareSheetOption = {
 
 export type ShareSheetOptions = ShareSheetOption[] | ShareSheetOption[][];
 
+const isImage = (name?: string) => name?.includes('/');
+
 const popupInheritKeys = [
   ...popupSharedPropKeys,
   'round',
@@ -93,14 +95,14 @@ export default defineComponent({
     };
 
     const renderIcon = (icon: string) => {
-      if (iconMap[icon]) {
-        return (
-          <div class={bem('icon', [icon])}>
-            <Icon name={iconMap[icon] || icon} />
-          </div>
-        );
+      if (isImage(icon)) {
+        return <img src={icon} class={bem('image-icon')} />;
       }
-      return <img src={icon} class={bem('image-icon')} />;
+      return (
+        <div class={bem('icon', [icon])}>
+          <Icon name={iconMap[icon] || icon} />
+        </div>
+      );
     };
 
     const renderOption = (option: ShareSheetOption, index: number) => {
diff --git a/packages/vant/src/share-sheet/demo/index.vue b/packages/vant/src/share-sheet/demo/index.vue
index b9dc53c79..c590985ca 100644
--- a/packages/vant/src/share-sheet/demo/index.vue
+++ b/packages/vant/src/share-sheet/demo/index.vue
@@ -83,6 +83,7 @@ const customIconOptions = computed(() => [
     name: t('name'),
     icon: cdnURL('custom-icon-water.png'),
   },
+  { name: t('name'), icon: 'label' },
 ]);
 
 const optionsWithDesc = computed<ShareSheetOptions>(() => [
diff --git a/packages/vant/src/share-sheet/test/index.spec.ts b/packages/vant/src/share-sheet/test/index.spec.ts
index 0e93b04cd..8d3da1203 100644
--- a/packages/vant/src/share-sheet/test/index.spec.ts
+++ b/packages/vant/src/share-sheet/test/index.spec.ts
@@ -1,5 +1,8 @@
 import { ShareSheet } from '..';
 import { mount, trigger, later } from '../../../test';
+import { cdnURL } from '../../../docs/site';
+
+const IMAGE = cdnURL('custom-icon-water.png');
 
 test('should render cancel text when using cancel-text prop', async () => {
   const wrapper = mount(ShareSheet, {
@@ -131,3 +134,19 @@ test('should have "van-popup--round" class when setting the round prop', async (
   await wrapper.setProps({ round: false });
   expect(wrapper.find('.van-popup--round').exists()).toBeFalsy();
 });
+
+test('should allow to custom the icon of option', () => {
+  const wrapper = mount(ShareSheet, {
+    props: {
+      show: true,
+      options: [
+        { name: 'Water', icon: IMAGE },
+        { name: 'Collect', icon: 'label' },
+      ],
+    },
+  });
+
+  expect(
+    wrapper.element.querySelectorAll('.van-share-sheet__option').length
+  ).toEqual(2);
+});