feat(components): [el-dialog] support custom close icon (#4514)

[el-dialog] support custom close icon

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)
+    })
   })
 })

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,

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">