feat(components): [notification] add closeIcon option with default Close (#20402)

* feat(components): [notification] add `closeIcon` prop with default Close

* docs(components): [notification] update doc for `closeIcon` option

docs/en-US/component/notification.md

@@ -91,6 +91,13 @@ Element Plus has added a global method `$notify` for `app.config.globalPropertie
 
 ```javascript
 import { ElNotification } from 'element-plus'
+import { CloseBold } from '@element-plus/icons-vue'
+
+ElNotification({
+  title: 'Title',
+  message: 'This is a message',
+  closeIcon: CloseBold
+})
 ```
 
 In this case you should call `ElNotification(options)`. We have also registered methods for different types, e.g. `ElNotification.success(options)`. You can call `ElNotification.closeAll()` to manually close all the instances.
@@ -136,6 +143,7 @@ ElNotification({}, appContext)
 | offset                   | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | ^[number]                                                             | 0         |
 | appendTo                 | set the root element for the notification, default to `document.body`                                              | ^[string] / ^[HTMLElement]                                            | —         |
 | zIndex                   | initial zIndex                                                                                                     | ^[number]                                                             | 0         |
+| closeIcon  ^(2.9.8)      | custom close icon, default is Close                                                                                | ^[string] / ^[Component]                                              | —         |
 
 ### Method
 

packages/components/notification/src/notification.ts

@@ -1,3 +1,4 @@
+import { Close } from '@element-plus/icons-vue'
 import { buildProps, definePropType, iconPropType } from '@element-plus/utils'
 
 import type { AppContext, ExtractPropTypes, VNode } from 'vue'
@@ -108,6 +109,13 @@ export const notificationProps = buildProps({
    * @description initial zIndex
    */
   zIndex: Number,
+  /**
+   * @description custom close icon, default is Close
+   */
+  closeIcon: {
+    type: iconPropType,
+    default: Close,
+  },
 } as const)
 export type NotificationProps = ExtractPropTypes<typeof notificationProps>
 

packages/components/notification/src/notification.vue

@@ -31,7 +31,7 @@
           </slot>
         </div>
         <el-icon v-if="showClose" :class="ns.e('closeBtn')" @click.stop="close">
-          <Close />
+          <component :is="closeIcon" />
         </el-icon>
       </div>
     </div>
@@ -41,7 +41,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
 import { useEventListener, useTimeoutFn } from '@vueuse/core'
-import { CloseComponents, TypeComponentsMap } from '@element-plus/utils'
+import { TypeComponentsMap } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import { ElIcon } from '@element-plus/components/icon'
 import { useGlobalComponentSettings } from '@element-plus/components/config-provider'
@@ -59,8 +59,6 @@ defineEmits(notificationEmits)
 const { ns, zIndex } = useGlobalComponentSettings('notification')
 const { nextZIndex, currentZIndex } = zIndex
 
-const { Close } = CloseComponents
-
 const visible = ref(false)
 let timer: (() => void) | undefined = undefined