feat: Alert added iconType to support custom icon (#8811)

components/alert/index.en-US.md

@@ -21,5 +21,6 @@ Alert component for feedback.
 | description | Additional content of Alert | string\|ReactNode | - |
 | message | Content of Alert | string\|ReactNode | - |
 | showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
+| iconType | Icon type, effective when `showIcon` is `true` | string | - |
 | type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
 | onClose | Callback when Alert is closed | Function | - |

components/alert/index.tsx

@@ -23,6 +23,7 @@ export interface AlertProps {
   onClose?: React.MouseEventHandler<HTMLAnchorElement>;
   /** Whether to show icon */
   showIcon?: boolean;
+  iconType?: string;
   style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
@@ -59,7 +60,7 @@ export default class Alert extends React.Component<AlertProps, any> {
   render() {
     let {
       closable, description, type, prefixCls = 'ant-alert', message, closeText, showIcon, banner,
-      className = '', style,
+      className = '', style, iconType,
     } = this.props;
 
     // banner模式默认有 Icon
@@ -67,27 +68,28 @@ export default class Alert extends React.Component<AlertProps, any> {
     // banner模式默认为警告
     type = banner && type === undefined ? 'warning' : type || 'info';
 
-    let iconType = '';
-    switch (type) {
-      case 'success':
-        iconType = 'check-circle';
-        break;
-      case 'info':
-        iconType = 'info-circle';
-        break;
-      case 'error':
-        iconType = 'cross-circle';
-        break;
-      case 'warning':
-        iconType = 'exclamation-circle';
-        break;
-      default:
-        iconType = 'default';
-    }
+    if (!iconType) {
+      switch (type) {
+        case 'success':
+          iconType = 'check-circle';
+          break;
+        case 'info':
+          iconType = 'info-circle';
+          break;
+        case 'error':
+          iconType = 'cross-circle';
+          break;
+        case 'warning':
+          iconType = 'exclamation-circle';
+          break;
+        default:
+          iconType = 'default';
+      }
 
-    // use outline icon in alert with description
-    if (!!description) {
-      iconType += '-o';
+      // use outline icon in alert with description
+      if (!!description) {
+        iconType += '-o';
+      }
     }
 
     let alertCls = classNames(prefixCls, {

components/alert/index.zh-CN.md

@@ -22,5 +22,6 @@ title: Alert
 | description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
 | message | 警告提示内容 | string\|ReactNode | 无 |
 | showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
+| iconType | 自定义图标类型，`showIcon` 为 `true` 时有效 | string | - |
 | type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
 | onClose | 关闭时触发的回调函数 | Function | 无 |