Element Plus 的 Result 组件怎么自定义图标？

启航提问于 2026-03-06 11:46:20 阅读 52

组件

我用 Element Plus 的 Result 组件展示操作结果，但想把默认的图标换成自己的 SVG 图标，试了 icon 属性但没生效，是不是用法不对？

官方文档说 icon 支持传入组件，但我直接传了个字符串路径好像不行……

const customIcon = 'https://example.com/icon.svg'

// 模板里这样写
// <el-result :icon="customIcon" title="提交成功" />

我来解答赞 13 收藏

反馈

2 条解答

UP主～雨欣 Lv1

Element Plus 的 Result 组件的 icon 属性确实支持自定义组件，但你直接传入一个字符串路径是不行的。要实现自定义 SVG 图标，得先把它封装成 Vue 组件。

简单来说，你需要创建一个 Vue 组件来渲染这个 SVG，然后把组件传给 Result 的 icon 属性。

这里有个示例：

template:

<el-result :icon="CustomIcon" title="提交成功"></el-result>,

components: {

  CustomIcon: {

    render(h) {

      return h('img', { attrs: { src: 'https://example.com/icon.svg' }})

    }

  }

}

或者更简洁地使用函数式组件：

components: {

  CustomIcon: {

    functional: true,

    render(h, ctx) {

      return h('img', { attrs: { src: 'https://example.com/icon.svg' }})

    }

  }

}

调试看看，应该就能正常显示你的自定义图标了。记得检查路径是否正确，网络请求有没有被拦截这些常见的问题。

2026-03-29 19:10

♫佳宜 Lv1

啊这个我也踩过坑...不能直接传svg路径，要传组件对象才行。我之前这样搞的：

import { defineComponent } from 'vue'

import CustomIcon from './custom-icon.vue'



const customIcon = defineComponent(CustomIcon)



// 模板

<el-result :icon="customIcon" title="提交成功" />

记得把你的svg封装成vue组件再传进去。困死了...

2026-03-06 12:01