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;
}