Vue3 怎么在ElMessage消息提示组件中添加自定义icon图标

1、定义icon组件代码：

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :fill="color"/></svg>
</template><script>
export default defineComponent({props: {iconClass: {type: String,required: true},className: {type: String,default: ''},color: {type: String,default: ''},},setup(props) {return {iconName: computed(() => `#icon-${props.iconClass}`),svgClass: computed(() => {if (props.className) {return `svg-icon ${props.className}`}return 'svg-icon'})}}
})
</script><style scope lang="scss">
.sub-el-icon,
.nav-icon {display: inline-block;font-size: 15px;margin-right: 12px;position: relative;
}.svg-icon {width: 1em;height: 1em;position: relative;fill: currentColor;vertical-align: -2px;
}
.menu-svg {width: 1.4em;height: 1.4em;position: relative;fill: currentColor;vertical-align: -2px;
}
</style>

2、在父组件引入并在代码中使用

import SvgIcon from "@/components/SvgIcon";const msg = (name) => {ElMessage({message: `正在执行${name}任务`,icon: SvgIcon,customClass: 'custom-message', // 自定义类名，用于后续样式覆盖dangerouslyUseHTMLString: true, // 允许使用 HTML 字符串});
}

3、最后根据自定义类名添加背景图样式

.custom-message {background: url('../../../assets/images/alert-bg.png') no-repeat center;background-size: 100% 90%;border: none;top: 50px !important;width: 365px;
}