如何深度自定义Element-Plus组件？内置图标修改难题求助

方法一：深度选择器覆盖CSS样式 #

Element-Plus内置图标受组件样式隔离影响，可通过深度选择器穿透修改：

• 若使用Vue单文件组件的Scoped CSS，用:deep()（Vue3推荐）或::v-deep选择图标元素：

/* 修改success类型Alert的图标颜色 */
:deep(.el-alert__icon.el-icon-success) {
  color: #your-custom-color;
  /* 若继承优先级过高，可添加!important强制覆盖 */
  /* color: #your-custom-color !important; */
}

/* 替换图标（以自定义字体图标为例） */
:deep(.el-alert__icon.el-icon-success) {
  font-family: 'your-custom-icon-font';
  content: '\your-icon-code';
  font-size: inherit;
}

/* 用背景图替换原图标 */
:deep(.el-alert__icon.el-icon-success) {
  background: url('your-local-icon-path') no-repeat center;
  font-size: 0; /* 隐藏原图标内容 */
  width: 18px;
  height: 18px;
}

• 若用全局CSS，直接选择类名即可，无需深度选择器：

.el-alert__icon.el-icon-success {
  color: #your-custom-color;
}

方法二：封装扩展Alert组件 #

若CSS覆盖不够灵活，可通过封装组件完全控制图标：

<template>
  <el-alert
    v-bind="$attrs"
    :title="title"
    :type="type"
    :show-icon="false" <!-- 关闭组件自带图标 -->
  >
    <template #title>
      <span class="custom-alert-icon">
        <el-icon :color="iconColor">
          <Check v-if="type === 'success'" />
          <InfoFilled v-else-if="type === 'info'" />
          <Warning v-else-if="type === 'warning'" />
          <Error v-else-if="type === 'error'" />
        </el-icon>
      </span>
      {{ title }}
    </template>
    <slot />
  </el-alert>
</template>

<script setup>
import { ElAlert, ElIcon, Check, InfoFilled, Warning, Error } from 'element-plus'

defineProps({
  title: String,
  type: {
    type: String,
    default: 'info'
  },
  iconColor: {
    type: String,
    default: '#165DFF'
  }
})
</script>

<style scoped>
.custom-alert-icon {
  margin-right: 8px;
}
</style>

使用时直接替换原生el-alert，可自由定义图标样式、颜色。

方法三：全局替换组件内置图标 #

若需统一修改所有Alert的图标，可通过Element-Plus全局配置替换：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import { Check, InfoFilled, Warning, Error } from '@element-plus/icons-vue'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus, {
  icons: {
    // 对应Alert源码中使用的图标注册名称
    Success: Check,
    InfoFilled: InfoFilled,
    Warning: Warning,
    Error: Error
  }
})

app.mount('#app')

注意：需确保替换的图标名称与Alert组件内部使用的完全一致，可查看组件源码确认。

内容的提问来源于stack exchange，提问作者baris_f