upgrade svg tabs prev & next icon

components/icon/demo/iconfont.md

@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-对于使用 [iconfont.cn](http://iconfont.cn/) 的用户，通过设置 `create` 方法参数对象中的 `namespace` 和 `cdnUrl` 字段， 即可轻松地使用已有项目中的图标。
+对于使用 [iconfont.cn](http://iconfont.cn/) 的用户，通过设置 `createFromIconfontCN` 方法参数对象中的 `namespace` 和 `cdnUrl` 字段， 即可轻松地使用已有项目中的图标。
 
 ## en-US
 
@@ -16,7 +16,7 @@ Todo, please replace me!
 ````jsx
 import { Icon } from 'antd';
 
-const IconFont = Icon.create({
+const IconFont = Icon.createFromIconfontCN({
   namespace: 'iconfont-foo',
   cdnUrl: 'at.alicdn.com/t/font_8d5l8fzk5b87iudi',
   prefix: 'icon-',

components/icon/index.tsx

@@ -40,7 +40,7 @@ const Icon: React.SFC<IconProps> = (props) => {
     // affect outter <i>...</i>
     tag: Tag = 'i',
     title,
-    className = '',
+    className,
     onClick,
     style,
 
@@ -63,15 +63,14 @@ const Icon: React.SFC<IconProps> = (props) => {
     'Icon should have `type` prop or `component` prop or `children`.',
   );
 
-  const classString = classNames(
-    { [`anticon`]: true, [`anticon-${type}`]: Boolean(type) },
-    className,
-  );
+  const classString = classNames({
+    [`anticon`]: true,
+    [`anticon-${type}`]: Boolean(type),
+  }, className);
 
   const svgClassString = classNames({
-    svgClassName,
     [`anticon-spin`]: !!spin || type === 'loading',
-  });
+  }, svgClassName);
 
   const computedSvgStyle = getComputedSvgStyle(
     { rotate, flip },

components/tabs/index.tsx

@@ -106,8 +106,8 @@ export default class Tabs extends React.Component<TabsProps, any> {
     let { inkBarAnimated, tabPaneAnimated } = typeof animated === 'object' ? {
       inkBarAnimated: animated.inkBar, tabPaneAnimated: animated.tabPane,
     } : {
-      inkBarAnimated: animated, tabPaneAnimated: animated,
-    };
+        inkBarAnimated: animated, tabPaneAnimated: animated,
+      };
 
     // card tabs should not have animation
     if (type !== 'line') {
@@ -133,11 +133,11 @@ export default class Tabs extends React.Component<TabsProps, any> {
         let closable = child.props.closable;
         closable = typeof closable === 'undefined' ? true : closable;
         const closeIcon = closable ? (
-           <Icon
-             type="close"
-             className={`${prefixCls}-close-x`}
-             onClick={e => this.removeTab(child.key as string, e)}
-           />
+          <Icon
+            type="close"
+            className={`${prefixCls}-close-x`}
+            onClick={e => this.removeTab(child.key as string, e)}
+          />
         ) : null;
         childrenWithClose.push(React.cloneElement(child, {
           tab: (
@@ -166,17 +166,34 @@ export default class Tabs extends React.Component<TabsProps, any> {
       </div>
     ) : null;
 
-    const renderTabBar = () => (
-      <ScrollableInkTabBar
-        inkBarAnimated={inkBarAnimated}
-        extraContent={tabBarExtraContent}
-        onTabClick={onTabClick}
-        onPrevClick={onPrevClick}
-        onNextClick={onNextClick}
-        style={tabBarStyle}
-        tabBarGutter={tabBarGutter}
-      />
-    );
+    const renderTabBar = () => {
+      const isVertical = tabPosition === 'left' || tabPosition === 'right';
+      const prevIconType = isVertical ? 'up' : 'left';
+      const nextIconType = isVertical ? 'down' : 'right';
+      const prevIcon = (
+        <span className={`${prefixCls}-tab-prev-icon`}>
+          <Icon type={prevIconType} className={`${prefixCls}-tab-prev-icon-target`} />
+        </span>
+      );
+      const nextIcon = (
+        <span className={`${prefixCls}-tab-next-icon`}>
+          <Icon type={nextIconType} className={`${prefixCls}-tab-next-icon-target`} />
+        </span>
+      );
+      return (
+        <ScrollableInkTabBar
+          inkBarAnimated={inkBarAnimated}
+          extraContent={tabBarExtraContent}
+          onTabClick={onTabClick}
+          onPrevClick={onPrevClick}
+          onNextClick={onNextClick}
+          style={tabBarStyle}
+          tabBarGutter={tabBarGutter}
+          prevIcon={prevIcon}
+          nextIcon={nextIcon}
+        />
+      );
+    };
 
     return (
       <RcTabs

components/tabs/style/index.less

@@ -102,9 +102,8 @@
       text-align: center;
       text-transform: none;
 
-      &:before {
+      &-target {
         display: block;
-        font-family: "anticon" !important;
         .iconfont-size-under-12px(10px);
       }
     }
@@ -120,17 +119,10 @@
 
   &-tab-next {
     right: 2px;
-
-    &-icon:before {
-      content: "\e61f";
-    }
   }
 
   &-tab-prev {
     left: 0;
-    &-icon:before {
-      content: "\e620";
-    }
     :root & {
       filter: none;
     }
@@ -317,18 +309,12 @@
         width: 100%;
         bottom: 0;
         height: @tab-scrolling-size;
-        &-icon:before {
-          content: "\e61d";
-        }
       }
 
       .@{tab-prefix-cls}-tab-prev {
         top: 0;
         width: 100%;
         height: @tab-scrolling-size;
-        &-icon:before {
-          content: "\e61e";
-        }
       }
     }