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 (
-
-
-
- );
+ if (isImage(icon)) {
+ return
;
}
- return
;
+ return (
+
+
+
+ );
};
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(() => [
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);
+});