antd的 Toast轻提示如何设置自定义图标

Ant Design (antd) 的 Toast 轻提示组件默认提供文本信息，如果你想要添加自定义图标，可以借助 CSS 或者通过 TypeScript 定义 CustomComponent 实现。这里是一个简单的步骤说明：

1. **CSS**:
- 首先，创建一个名为 `custom-icon.svg` 或 `.png` 的图标文件，并将其放在项目的静态资源目录下。
- 然后，在 CSS 中，你可以像这样引用它并将其作为背景图片：

     .ant toast {
       background-image: url('/path/to/custom-icon.svg'); /* 或者 '.png' */
       background-size: contain;
       background-position: center; 
     }

把`'/path/to/'`替换为你实际存放图标的路径。

2. **TypeScript + CustomComponent**:
如果你想通过 TypeScript 进行更严格的类型管理，可以创建一个自定义组件，比如一个带图标的按钮组件：

   import React from 'react';
   import { Button } from 'antd';

   interface CustomToastProps {
     customIcon: string;
   }

   const CustomToast: React.FC<CustomToastProps> = ({ customIcon }) => (
     <Button type="primary" icon={customIcon} />
   );

   // 使用时传递自定义图标
   <CustomToast customIcon={<Icon className="your-custom-icon-class" />} />;

其中，`Icon` 是你从 Ant Design 导入的图标组件，`your-custom-icon-class` 是你在 CSS 中定义的图标样式类。

记得将 `Icon` 替换为实际的 Ant Design 图标组件，如 `AntdIcon` 或 `FontAwesomeIcon` 等。