Ant Design 的 Notification 通知怎么自定义图标？

码农文华提问于 2026-03-14 15:09:18 阅读 73

组件

我在用 Ant Design 的 notification 时，想把默认的图标换成自己的 SVG 图标，但文档里没找到具体怎么替换。试过传 icon 属性，但好像没生效？

比如我这样写：notification.success({ message: '提示', icon: })，结果图标还是原来的对勾，是我用法不对吗？

Form表单 Table组件 UI组件

我来解答赞 10 收藏

反馈

1 条解答

a'ゞ彦鸽 Lv1

Ant Design 的 Notification 确实有这个坑。你用的 notification.success() 这种快捷方法，它内部会强制把 icon 覆盖成默认的对勾图标，所以你传了也没用。

解决办法很简单：用 notification.open() 替代 notification.success()：

import { notification } from 'antd';

import { YourCustomIcon } from './icons';



notification.open({

  message: '提示',

  description: '内容',

  icon: ,

});

notification.open() 是底层方法，icon 参数是有效的。success、error、warning 这些快捷方式本质上都是调用的 open，只是内部硬编码了默认图标。

如果你就是想在业务代码里用 success 这个语义，也可以先调 open，然后再手动改一下样式，或者直接用组件写 JSX：

import { Notification } from 'antd';

import { YourCustomIcon } from './icons';




  message="提示"

  icon={}

/>

第一种方式最省事，改一下方法名就行。

2026-03-14 15:11