feat:update page-header, pagination, popconfirm, progress icon

feat:update page-header, pagination, popconfirm, progress icon

components/page-header/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from '../_util/vue-types';
 import { getComponentFromProp, getOptionProps } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
-import Icon from '../icon';
+import ArrowRightOutlined from '@ant-design/icons-vue/ArrowRightOutlined';
 import Breadcrumb from '../breadcrumb';
 import Avatar from '../avatar';
 import TransButton from '../_util/transButton';
@@ -56,7 +56,7 @@ const renderTitle = (h, prefixCls, instance) => {
   const subTitle = getComponentFromProp(instance, 'subTitle');
   const tags = getComponentFromProp(instance, 'tags');
   const extra = getComponentFromProp(instance, 'extra');
-  const backIcon = getComponentFromProp(instance, 'backIcon') || <Icon type="arrow-left" />;
+  const backIcon = getComponentFromProp(instance, 'backIcon') || <ArrowRightOutlined/>;
   const onBack = instance.$listeners.back;
   const headingPrefixCls = `${prefixCls}-heading`;
   if (title || subTitle || tags || extra) {

components/pagination/Pagination.jsx

@@ -5,7 +5,10 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { getOptionProps, getListeners } from '../_util/props-util';
 import VcPagination from '../vc-pagination';
 import enUS from '../vc-pagination/locale/en_US';
-import Icon from '../icon';
+import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
+import RightOutlined from '@ant-design/icons-vue/RightOutlined';
+import DoubleLeftOutlined from '@ant-design/icons-vue/DoubleLeftOutlined';
+import DoubleRightOutlined from '@ant-design/icons-vue/DoubleRightOutlined';
 import { ConfigConsumerProps } from '../config-provider';
 
 export const PaginationProps = () => ({
@@ -53,19 +56,19 @@ export default {
     getIconsProps(prefixCls) {
       const prevIcon = (
         <a class={`${prefixCls}-item-link`}>
-          <Icon type="left" />
+          <LeftOutlined/>
         </a>
       );
       const nextIcon = (
         <a class={`${prefixCls}-item-link`}>
-          <Icon type="right" />
+          <RightOutlined/>
         </a>
       );
       const jumpPrevIcon = (
         <a class={`${prefixCls}-item-link`}>
           {/* You can use transition effects in the container :) */}
           <div class={`${prefixCls}-item-container`}>
-            <Icon class={`${prefixCls}-item-link-icon`} type="double-left" />
+            <DoubleLeftOutlined class={`${prefixCls}-item-link-icon`} />
             <span class={`${prefixCls}-item-ellipsis`}>•••</span>
           </div>
         </a>
@@ -74,7 +77,7 @@ export default {
         <a class={`${prefixCls}-item-link`}>
           {/* You can use transition effects in the container :) */}
           <div class={`${prefixCls}-item-container`}>
-            <Icon class={`${prefixCls}-item-link-icon`} type="double-right" />
+            <DoubleRightOutlined class={`${prefixCls}-item-link-icon`} />
             <span class={`${prefixCls}-item-ellipsis`}>•••</span>
           </div>
         </a>

components/popconfirm/index.jsx

@@ -5,7 +5,7 @@ import PropTypes from '../_util/vue-types';
 import { getOptionProps, hasProp, getComponentFromProp, mergeProps } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import buttonTypes from '../button/buttonTypes';
-import Icon from '../icon';
+import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
 import Button from '../button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
@@ -86,7 +86,7 @@ const Popconfirm = {
     renderOverlay(prefixCls, popconfirmLocale) {
       const { okType, okButtonProps, cancelButtonProps } = this;
       const icon = getComponentFromProp(this, 'icon') || (
-        <Icon type="exclamation-circle" theme="filled" />
+        <ExclamationCircleFilled/>
       );
       const cancelBtnProps = mergeProps(
         {

components/progress/progress.jsx

@@ -2,7 +2,10 @@ import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
-import Icon from '../icon';
+import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
+import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
+import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import Line from './line';
 import Circle from './circle';
 import { validProgress } from './utils';
@@ -66,7 +69,7 @@ export default {
       let text;
       const textFormatter =
         format || this.$scopedSlots.format || (percentNumber => `${percentNumber}%`);
-      const iconType = type === 'circle' || type === 'dashboard' ? '' : '-circle';
+      const isLineType = type === 'line';
       if (
         format ||
         this.$scopedSlots.format ||
@@ -74,9 +77,9 @@ export default {
       ) {
         text = textFormatter(validProgress(percent), validProgress(successPercent));
       } else if (progressStatus === 'exception') {
-        text = <Icon type={`close${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
+        text = isLineType ? <CloseCircleFilled /> : <CloseOutlined />;
       } else if (progressStatus === 'success') {
-        text = <Icon type={`check${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
+        text = isLineType ? <CheckCircleFilled /> : <CheckOutlined />;
       }
       return (
         <span class={`${prefixCls}-text`} title={typeof text === 'string' ? text : undefined}>