element-plus(V2.2.14) notification组件自定义图标(icon)不生效

解决

import { ElNotification } from 'element-plus';
import Icon from '@/components/notifyIcon.vue';
export const notify = (message, title = '消息通知') => {
  ElNotification({
    title,
    message,
    duration: 0,
    type: 'none', // 必须给个type类型不存在的['success' | 'warning' | 'info' | 'error' | ''] 才能显示
    icon: Icon,
  });
};

官方文档

原因

V2.2.14 源码

• 完整地址

<el-icon v-if="iconComponent" :class="[ns.e('icon'), typeClass]">
    <component :is="iconComponent" />
</el-icon>

const iconComponent = computed(() => {
  if (!props.type) return '' // 这里不设置type 返回空 icon自然不会显示
  return TypeComponentsMap[props.type] || props.icon
})

V2.3.0源码

• 完整地址

<el-icon v-if="iconComponent" :class="[ns.e('icon'), typeClass]">
   <component :is="iconComponent" />
</el-icon>

const iconComponent = computed(() => {
  if (!props.type) return props.icon // 这里进行了修复
  return TypeComponentsMap[props.type] || props.icon
})