Result结果组件的图标怎么自定义不生效？

UX艳艳提问于 2026-03-10 12:23:20 阅读 54

组件

我在用 Ant Design Vue 的 Result 组件，想把默认的成功图标换成自定义的 SVG，但试了 slot 和 icon 属性都没反应，是我写法有问题吗？

这是我的代码：

<template>
  <a-result status="success" title="提交成功">
    <template #icon>
      <svg viewBox="0 0 24 24" width="64" height="64">
        <circle cx="12" cy="12" r="10" fill="#52c41a" />
      </svg>
    </template>
  </a-result>
</template>

Result结果反馈组件

我来解答赞 9 收藏

反馈

2 条解答

钰岩（打工版） Lv1

遇到这个问题一般这样处理。Ant Design Vue 的 Result 组件确实可以通过 icon 属性或者 slot 来自定义图标，不过有时候版本更新可能会导致某些用法失效。你可以试试直接在 icon 属性里传入你的 SVG 内容，有时候这样更直接有效。

你先试试改一下你的代码，这样写：

template>

注意这里 icon 属性前面加了个冒号 :，表示这是一个动态绑定。如果你发现这样还不行，可能是版本兼容性问题，检查一下 Ant Design Vue 的版本，确保是最新的。如果不是最新，升级到最新版本再试试看。

2026-03-25 03:05

闲人子香 Lv1

status属性会和icon冲突，删掉status="success"就行。改成这样：



<a-result title="提交成功">

  <template #icon>

    <svg viewBox="0 0 24 24" width="64" height="64">

      <circle cx="12" cy="12" r="10" fill="#52c41a" />

    </svg>

  </template>

</a-result>

搞定。

2026-03-10 12:43