Element Plus图标不显示，颜色设置也没效果怎么办？

名哲~ 提问于 2026-01-31 12:16:25 阅读 34

组件

刚在项目里用Element Plus的ElIcon组件包裹SvgIcon，图标完全没显示出来。我按文档引入了ElIcon和对应图标组件，但页面就是一片空白。更奇怪的是，我给图标加了红色和2倍大小，样式好像没生效。



  



import { ElIcon } from 'element-plus'
import SvgIcon from '@/components/SvgIcon.vue'

已经确认SvgIcon组件单独使用时能正常显示，但放在ElIcon里就没了。试过把color写成内联样式也不行，是不是有什么注册步骤漏了？

Vue组件

我来解答赞 8 收藏

反馈

2 条解答

Dev · 广利 Lv1

这个问题大概率是Element Plus的图标使用方式和SvgIcon组件的结合出了问题。通用的做法是，ElIcon其实已经自带了SVG图标的支持，不需要额外包裹一个自定义的SvgIcon组件。

先确认一下你的SvgIcon是不是自己封装的，如果是的话，建议直接用Element Plus推荐的方式引入SVG图标。具体来说，你可以通过安装 @element-plus/icons-vue 这个包，然后按需引入对应的图标组件，比如 HomeFilled 或者其他你需要的图标。

如果你确实要用自定义的SVG图标，那就不用再用ElIcon了，直接用你自己的SvgIcon组件就好。ElIcon的设计初衷是为了配合官方图标的样式和行为，混用可能会导致冲突。

至于样式的问题，ElIcon内部会强制覆盖一些样式，比如颜色和大小，所以即使你写了红色或者2倍大小，可能被它的默认样式给干掉了。解决办法是用深度选择器来覆盖，比如在你的样式文件里写：

:deep(.el-icon) {

  color: red;

  font-size: 2em;

}

最后总结一下，要么就完全按照Element Plus的方式引入官方图标，要么就彻底用自己的SvgIcon，别混着用。这样能省不少麻烦。

2026-02-16 22:11

UE丶乙涵 Lv1

这个问题我遇到过，ElIcon 本身是为内置图标设计的，直接包裹自定义的 SvgIcon 可能会出问题。性能上我们也不想多加无意义的 DOM 层级。

解决方法很简单，别用 ElIcon 包裹 SvgIcon，直接用 SvgIcon 就行了。如果你非要保留 ElIcon 的样式功能，可以自己扩展一个组件：

<template>

  <el-icon :size="size" :color="color">

    <SvgIcon :icon-class="iconClass" />

  </el-icon>

</template>



<script>

import { defineComponent } from 'vue';

import { ElIcon } from 'element-plus';

import SvgIcon from '@/components/SvgIcon.vue';



export default defineComponent({

  components: { ElIcon, SvgIcon },

  props: {

    iconClass: String,

    size: [String, Number],

    color: String

  }

});

</script>

这样写既能用 ElIcon 的属性控制大小和颜色，又不会影响 SvgIcon 的显示。

另外提醒一下，确保你的 SVG 图标有正确的 viewBox 属性，否则可能会因为缩放问题看不到图标。这种坑我也踩过，烦死了。

2026-01-31 19:15