use svg icon in pagination

components/pagination/Pagination.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import Select from '../select';
 import MiniSelect from './MiniSelect';
+import Icon from '../icon';
 
 export interface PaginationProps {
   total?: number;
@@ -42,13 +43,44 @@ export default class Pagination extends React.Component<PaginationProps, {}> {
     selectPrefixCls: 'ant-select',
   };
 
+  getIconsProps = () => {
+    const { prefixCls } = this.props;
+    const prevIcon = (
+      <a className={`${prefixCls}-item-link`}>
+        <Icon type="left"/>
+      </a>
+    );
+    const nextIcon = (
+      <a className={`${prefixCls}-item-link`}>
+        <Icon type="right"/>
+      </a>
+    );
+    const jumpPrevIcon = (
+      <a className={`${prefixCls}-item-link`}>
+        <Icon className={`${prefixCls}-item-link-icon`} type="left"/>
+      </a>
+    );
+    const jumpNextIcon = (
+      <a className={`${prefixCls}-item-link`}>
+        <Icon className={`${prefixCls}-item-link-icon`} type="double-right"/>
+      </a>
+    );
+    return {
+      prevIcon,
+      nextIcon,
+      jumpPrevIcon,
+      jumpNextIcon,
+    };
+  }
+
   renderPagination = (contextLocale: PaginationLocale) => {
-    const { className, size, locale: customLocale,  ...restProps } = this.props;
+    const { className, size, locale: customLocale, ...restProps } = this.props;
     const locale = { ...contextLocale, ...customLocale };
     const isSmall = size === 'small';
     return (
       <RcPagination
         {...restProps}
+        {...this.getIconsProps()}
         className={classNames(className, { mini: isSmall })}
         selectComponentClass={isSmall ? MiniSelect : Select}
         locale={locale}

components/pagination/style/index.less

@@ -87,40 +87,45 @@
   &-jump-prev,
   &-jump-next {
     outline: 0;
+    position: relative;
 
     &:after {
       content: "•••";
+      position: absolute;
       display: block;
       letter-spacing: 2px;
       color: @disabled-color;
       text-align: center;
+      opacity: 1;
+      transition: all .2s;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+    }
+
+    .@{pagination-prefix-cls}-item-link {
+      .iconfont-size-under-12px(12px);
+      position: absolute;
+      color: @primary-color;
+      letter-spacing: -1px;
+      opacity: 0;
+      transition: all .2s;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
     }
 
     &:focus,
     &:hover {
       &:after {
-        color: @primary-color;
-        .iconfont-size-under-12px(8px);
-        letter-spacing: -1px;
-        font-family: "anticon";
+        opacity: 0;
       }
-    }
-  }
-
-  &-jump-prev {
-    &:focus,
-    &:hover {
-      &:after {
-        content: "\e620\e620";
-      }
-    }
-  }
-
-  &-jump-next {
-    &:focus,
-    &:hover {
-      &:after {
-        content: "\e61f\e61f";
+      .@{pagination-prefix-cls}-item-link {
+        opacity: 1;
       }
     }
   }
@@ -173,7 +178,6 @@
         font-size: 12px;
         display: block;
         height: @pagination-item-size - 2px;
-        font-family: "anticon";
         text-align: center;
         font-weight: 500;
       }
@@ -186,20 +190,6 @@
     }
   }
 
-  &-prev {
-    .@{pagination-prefix-cls}-item-link:after {
-      content: "\e620";
-      display: block;
-    }
-  }
-
-  &-next {
-    .@{pagination-prefix-cls}-item-link:after {
-      content: "\e61f";
-      display: block;
-    }
-  }
-
   &-disabled {
     &,
     &:hover,