From 5beaf750f319b2d4d42d28822bb95dce06041641 Mon Sep 17 00:00:00 2001
From: spx <spx123456@foxmail.com>
Date: Tue, 7 Dec 2021 17:51:15 +0800
Subject: [PATCH] feat(components): [el-dialog] support custom close icon
 (#4514)

[el-dialog] support custom close icon
---
 .../components/dialog/__tests__/dialog.spec.ts   | 16 ++++++++++++++++
 packages/components/dialog/src/dialog.ts         |  6 +++++-
 packages/components/dialog/src/dialog.vue        |  4 +++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/components/dialog/__tests__/dialog.spec.ts b/packages/components/dialog/__tests__/dialog.spec.ts
index 5949e4cdad..de1e9964ee 100644
--- a/packages/components/dialog/__tests__/dialog.spec.ts
+++ b/packages/components/dialog/__tests__/dialog.spec.ts
@@ -2,6 +2,7 @@ import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { rAF } from '@element-plus/test-utils/tick'
 import triggerCompositeClick from '@element-plus/test-utils/composite-click'
+import { Delete } from '@element-plus/icons'
 import Dialog from '../'
 
 const AXIOM = 'Rem is the best girl'
@@ -259,5 +260,20 @@ describe('Dialog.vue', () => {
       expect(onClosed).toHaveBeenCalled()
       expect(visible).toBe(false)
     })
+
+    test('closeIcon', async () => {
+      const wrapper = _mount({
+        props: {
+          modelValue: true,
+          closeIcon: Delete,
+        },
+      })
+      await nextTick()
+      await rAF()
+      const closeIcon = wrapper.find('svg')
+      expect(closeIcon.exists()).toBe(true)
+      const svg = mount(Delete).find('svg').element
+      expect(closeIcon.element.innerHTML).toBe(svg.innerHTML)
+    })
   })
 })
diff --git a/packages/components/dialog/src/dialog.ts b/packages/components/dialog/src/dialog.ts
index 22ed4d7774..2f5a4f6433 100644
--- a/packages/components/dialog/src/dialog.ts
+++ b/packages/components/dialog/src/dialog.ts
@@ -2,7 +2,7 @@ import { isValidWidthUnit } from '@element-plus/utils/validators'
 import { buildProps, definePropType } from '@element-plus/utils/props'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, Component } from 'vue'
 
 export const dialogProps = buildProps({
   appendToBody: {
@@ -24,6 +24,10 @@ export const dialogProps = buildProps({
     type: String,
     default: '',
   },
+  closeIcon: {
+    type: definePropType<string | Component>([String, Object]),
+    default: '',
+  },
   closeOnClickModal: {
     type: Boolean,
     default: true,
diff --git a/packages/components/dialog/src/dialog.vue b/packages/components/dialog/src/dialog.vue
index ce37fa6c76..ba3416f465 100644
--- a/packages/components/dialog/src/dialog.vue
+++ b/packages/components/dialog/src/dialog.vue
@@ -49,7 +49,9 @@
                 type="button"
                 @click="handleClose"
               >
-                <el-icon class="el-dialog__close"><close /> </el-icon>
+                <el-icon class="el-dialog__close">
+                  <component :is="closeIcon || 'close'" />
+                </el-icon>
               </button>
             </div>
             <template v-if="rendered">