fix(Upload): fix global icon replacement (#3244)

Tencent · Aug 15, 2024 · 02cf2be · 02cf2be
1 parent 74c34f7
commit 02cf2be
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/upload/themes/multiple-flow-list.tsx b/src/upload/themes/multiple-flow-list.tsx
@@ -7,12 +7,12 @@ import {
   CheckCircleFilledIcon as TdCheckCircleFilledIcon,
   ErrorCircleFilledIcon as TdErrorCircleFilledIcon,
   TimeFilledIcon as TdTimeFilledIcon,
-  FileExcelIcon,
-  FilePdfIcon,
-  FileWordIcon,
-  FilePowerpointIcon,
-  FileIcon,
-  VideoIcon,
+  FileExcelIcon as TdFileExcelIcon,
+  FilePdfIcon as TdFilePdfIcon,
+  FileWordIcon as TdFileWordIcon,
+  FilePowerpointIcon as TdFilePowerpointIcon,
+  FileIcon as TdFileIcon,
+  VideoIcon as TdVideoIcon,
 } from 'tdesign-icons-vue';
 import isFunction from 'lodash/isFunction';
 import isObject from 'lodash/isObject';
@@ -81,6 +81,12 @@ export default defineComponent({
       CheckCircleFilledIcon: TdCheckCircleFilledIcon,
       ErrorCircleFilledIcon: TdErrorCircleFilledIcon,
       TimeFilledIcon: TdTimeFilledIcon,
+      FileExcelIcon: TdFileExcelIcon,
+      FilePdfIcon: TdFilePdfIcon,
+      FileWordIcon: TdFileWordIcon,
+      FilePowerpointIcon: TdFilePowerpointIcon,
+      FileIcon: TdFileIcon,
+      VideoIcon: TdVideoIcon,
     });
 
     const drag = useDrag(props.dragEvents, accept);
@@ -375,6 +381,10 @@ export default defineComponent({
       );
     },
     getFileThumbnailIcon(fileType: string) {
+      const {
+        FilePdfIcon, FileExcelIcon, FileWordIcon, FilePowerpointIcon, VideoIcon, FileIcon,
+      } = this.icons;
+
       if (FILE_PDF_REGEXP.test(fileType)) {
         return <FilePdfIcon />;
       }

diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx
@@ -1,7 +1,7 @@
 import {
   computed, defineComponent, Ref, SetupContext, toRef,
 } from 'vue';
-import { UploadIcon } from 'tdesign-icons-vue';
+import { UploadIcon as TdUploadIcon } from 'tdesign-icons-vue';
 import useFormDisabled from '../hooks/useFormDisabled';
 import props from './props';
 import NormalFile from './themes/normal-file';
@@ -18,6 +18,8 @@ import { getFileList } from '../_common/js/upload/utils';
 import { formatToUploadFile } from '../_common/js/upload/main';
 import { UploadFile } from './type';
 
+import useGlobalIcon from '../hooks/useGlobalIcon';
+
 export default defineComponent({
   name: 'TUpload',
 
@@ -45,6 +47,9 @@ export default defineComponent({
     } = uploadData;
 
     const tDisabled = computed<boolean>(() => formDisabled.value || innerDisabled.value);
+    const icons = useGlobalIcon({
+      UploadIcon: TdUploadIcon,
+    });
 
     const commonDisplayFileProps = computed<CommonDisplayFileProps>(() => ({
       accept: props.accept,
@@ -115,11 +120,13 @@ export default defineComponent({
       triggerButtonProps,
       sizeOverLimitMessage,
       tDisabled,
+      icons,
     };
   },
 
   methods: {
     renderTrigger() {
+      const { UploadIcon } = this.icons;
       const getDefaultTrigger = () => {
         if (this.theme === 'file-input') {
           return (