Element-plus Notification 自定义动态图标

需求

实现一个含有动态加载图标的通知，效果如下：

分析

官方默认的仅有4种图标（Success、Warning、Info、Error）：

显然这并不能满足我们的需求。
官方的API中icon可帮助我们实现：

但很重要的一点是，属性icon不能传入gif图片的路径，亲测无效，所以换一种思路，使用Component传入，然后在Component中放入img，其src使用我们gif图片的路径，这样就可以实现了。至于icon也可传入string情况下的string是什么，本人没测出来，有知道的大神可以在评论区交流！

实现

存放加载gif的Components：Loading.vue：

<template>
    <img src="@/assets/loading/loading.gif" alt="">
template>

<script setup lang='ts'>
script>

<style lang='scss' scoped>
style>

使用的Components：

import LoadingIcon from '@/components/LoadingIcon.vue'

ElNotification({
    // @ts-ignore
    icon: LoadingIcon,
    message: 'Is the login',
    duration: 0,
})

效果