feat: modal, alert and message use new icon (#1932)

* feat: modal and alert use new icon

* chore: icons without treeShaking

* chore: message icon support h => VNode;
remove warning in ConfirmDialog

components/alert/index.jsx

@@ -1,4 +1,12 @@
-import Icon from '../icon';
+import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
+import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
+import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
+import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
+import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
+import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
+import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
+import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled';
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import classNames from 'classnames';
 import BaseMixin from '../_util/BaseMixin';
 import PropTypes from '../_util/vue-types';
@@ -9,6 +17,21 @@ import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
 
 function noop() {}
+
+const iconMapFilled = {
+  success: CheckCircleFilled,
+  info: InfoCircleFilled,
+  error: CloseCircleFilled,
+  warning: ExclamationCircleFilled,
+};
+
+const iconMapOutlined = {
+  success: CheckCircleOutlined,
+  info: InfoCircleOutlined,
+  error: CloseCircleOutlined,
+  warning: ExclamationCircleOutlined,
+};
+
 export const AlertProps = {
   /**
    * Type of Alert styles, options:`success`, `info`, `warning`, `error`
@@ -28,7 +51,6 @@ export const AlertProps = {
   afterClose: PropTypes.func.def(noop),
   /** Whether to show icon */
   showIcon: PropTypes.bool,
-  iconType: PropTypes.string,
   prefixCls: PropTypes.string,
   banner: PropTypes.bool,
   icon: PropTypes.any,
@@ -70,12 +92,12 @@ const Alert = {
     },
   },
 
-  render() {
+  render(h) {
     const { prefixCls: customizePrefixCls, banner, closing, closed } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
-    let { closable, type, showIcon, iconType } = this;
+    let { closable, type, showIcon } = this;
     const closeText = getComponentFromProp(this, 'closeText');
     const description = getComponentFromProp(this, 'description');
     const message = getComponentFromProp(this, 'message');
@@ -84,31 +106,8 @@ const Alert = {
     showIcon = banner && showIcon === undefined ? true : showIcon;
     // banner模式默认为警告
     type = banner && type === undefined ? 'warning' : type || 'info';
-    let iconTheme = 'filled';
 
-    if (!iconType) {
+    const iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
-      switch (type) {
-        case 'success':
-          iconType = 'check-circle';
-          break;
-        case 'info':
-          iconType = 'info-circle';
-          break;
-        case 'error':
-          iconType = 'close-circle';
-          break;
-        case 'warning':
-          iconType = 'exclamation-circle';
-          break;
-        default:
-          iconType = 'default';
-      }
-
-      // use outline icon in alert with description
-      if (description) {
-        iconTheme = 'outlined';
-      }
-    }
 
     // closeable when closeText is assigned
     if (closeText) {
@@ -126,22 +125,20 @@ const Alert = {
 
     const closeIcon = closable ? (
       <a type="button" onClick={this.handleClose} class={`${prefixCls}-close-icon`} tabIndex={0}>
-        {closeText ? (
+        {closeText ? <span class={`${prefixCls}-close-text`}>{closeText}</span> : <CloseOutlined />}
-          <span class={`${prefixCls}-close-text`}>{closeText}</span>
-        ) : (
-          <Icon type="close" />
-        )}
       </a>
     ) : null;
 
-    const iconNode = (icon &&
+    const iconNode =
-      (isValidElement(icon) ? (
+      (icon &&
-        cloneElement(icon, {
+        (isValidElement(icon) ? (
-          class: `${prefixCls}-icon`,
+          cloneElement(icon, {
-        })
+            class: `${prefixCls}-icon`,
-      ) : (
+          })
-        <span class={`${prefixCls}-icon`}>{icon}</span>
+        ) : (
-      ))) || <Icon class={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />;
+          <span class={`${prefixCls}-icon`}>{icon}</span>
+        ))) ||
+      h(iconType, { class: `${prefixCls}-icon` });
 
     const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
       appear: false,

components/message/index.js

@@ -1,5 +1,9 @@
 import Notification from '../vc-notification';
-import Icon from '../icon';
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
+import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
+import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
+import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled';
 
 let defaultDuration = 3;
 let defaultTop;
@@ -34,17 +38,17 @@ function getMessageInstance(callback) {
   );
 }
 
-// type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
+const iconMap = {
+  info: InfoCircleFilled,
+  success: CheckCircleFilled,
+  error: CloseCircleFilled,
+  warning: ExclamationCircleFilled,
+  loading: LoadingOutlined,
+};
 
 function notice(args) {
   const duration = args.duration !== undefined ? args.duration : defaultDuration;
-  const iconType = {
+  const Icon = iconMap[args.type];
-    info: 'info-circle',
-    success: 'check-circle',
-    error: 'close-circle',
-    warning: 'exclamation-circle',
-    loading: 'loading',
-  }[args.type];
 
   const target = args.key || key++;
   const closePromise = new Promise(resolve => {
@@ -60,19 +64,11 @@ function notice(args) {
         duration,
         style: {},
         content: h => {
-          const iconNode = (
-            <Icon type={iconType} theme={iconType === 'loading' ? 'outlined' : 'filled'} />
-          );
-          const switchIconNode = iconType ? iconNode : '';
           return (
             <div
               class={`${prefixCls}-custom-content${args.type ? ` ${prefixCls}-${args.type}` : ''}`}
             >
-              {args.icon
+              {args.icon ? typeof args.icon === 'function' ? args.icon(h) : args.icon : <Icon />}
-                ? typeof args.icon === 'function'
-                  ? args.icon(h)
-                  : args.icon
-                : switchIconNode}
               <span>{typeof args.content === 'function' ? args.content(h) : args.content}</span>
             </div>
           );

components/modal/ConfirmDialog.jsx

@@ -1,15 +1,14 @@
 import classNames from 'classnames';
-import Icon from '../icon';
 import Dialog from './Modal';
 import ActionButton from './ActionButton';
 import { getConfirmLocale } from './locale';
-import warning from '../_util/warning';
 
 export default {
   functional: true,
   render(h, context) {
     const { props } = context;
     const {
+      icon,
       onCancel,
       onOk,
       close,
@@ -22,15 +21,8 @@ export default {
       maskStyle,
       okButtonProps,
       cancelButtonProps,
-      iconType = 'question-circle',
       closable = false,
     } = props;
-    warning(
-      !('iconType' in props),
-      'Modal',
-      `The property 'iconType' is deprecated. Use the property 'icon' instead.`,
-    );
-    const icon = props.icon ? props.icon : iconType;
     const okType = props.okType || 'primary';
     const prefixCls = props.prefixCls || 'ant-modal';
     const contentPrefixCls = `${prefixCls}-confirm`;
@@ -65,7 +57,6 @@ export default {
         {cancelText}
       </ActionButton>
     );
-    const iconNode = typeof icon === 'string' ? <Icon type={icon} /> : icon(h);
 
     return (
       <Dialog
@@ -92,7 +83,7 @@ export default {
       >
         <div class={`${contentPrefixCls}-body-wrapper`}>
           <div class={`${contentPrefixCls}-body`}>
-            {iconNode}
+            {typeof icon === 'function' ? icon(h) : icon}
             {props.title === undefined ? null : (
               <span class={`${contentPrefixCls}-title`}>{props.title}</span>
             )}

components/modal/Modal.jsx

@@ -3,7 +3,7 @@ import Dialog from '../vc-dialog';
 import PropTypes from '../_util/vue-types';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import { getConfirmLocale } from './locale';
-import Icon from '../icon';
+import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import Button from '../button';
 import buttonTypes from '../button/buttonTypes';
 const ButtonType = buttonTypes().type;
@@ -186,7 +186,7 @@ export default {
     const closeIcon = getComponentFromProp(this, 'closeIcon');
     const closeIconToRender = (
       <span class={`${prefixCls}-close-x`}>
-        {closeIcon || <Icon class={`${prefixCls}-close-icon`} type={'close'} />}
+        {closeIcon || <CloseOutlined class={`${prefixCls}-close-icon`} />}
       </span>
     );
     const footer = getComponentFromProp(this, 'footer');

components/modal/index.js

@@ -1,6 +1,9 @@
 import Modal, { destroyFns } from './Modal';
 import modalConfirm from './confirm';
-import Icon from '../icon';
+import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
+import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
+import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
+import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
 import Base from '../base';
 
 // export { ActionButtonProps } from './ActionButton'
@@ -10,7 +13,7 @@ const info = function(props) {
   const config = {
     type: 'info',
     icon: h => {
-      return <Icon type="info-circle" />;
+      return <InfoCircleOutlined />;
     },
     okCancel: false,
     ...props,
@@ -22,7 +25,7 @@ const success = function(props) {
   const config = {
     type: 'success',
     icon: h => {
-      return <Icon type="check-circle" />;
+      return <CheckCircleOutlined />;
     },
     okCancel: false,
     ...props,
@@ -34,7 +37,7 @@ const error = function(props) {
   const config = {
     type: 'error',
     icon: h => {
-      return <Icon type="close-circle" />;
+      return <CloseCircleOutlined />;
     },
     okCancel: false,
     ...props,
@@ -46,7 +49,7 @@ const warning = function(props) {
   const config = {
     type: 'warning',
     icon: h => {
-      return <Icon type="exclamation-circle" />;
+      return <ExclamationCircleOutlined />;
     },
     okCancel: false,
     ...props,

components/vc-dialog/Dialog.jsx

@@ -1,4 +1,4 @@
-import { getComponentFromProp, initDefaultProps } from '../_util/props-util';
+import { initDefaultProps } from '../_util/props-util';
 import KeyCode from '../_util/KeyCode';
 import contains from '../vc-util/Dom/contains';
 import LazyRenderBox from './LazyRenderBox';
@@ -218,6 +218,7 @@ export default {
         visible,
         bodyProps,
         forceRender,
+        closeIcon,
       } = this;
       const dest = {};
       if (width !== undefined) {
@@ -249,7 +250,6 @@ export default {
 
       let closer;
       if (closable) {
-        const closeIcon = getComponentFromProp(this, 'closeIcon');
         closer = (
           <button
             type="button"