From 535f68dbd069f8a1e4ebf6b1e02e7c1986808b17 Mon Sep 17 00:00:00 2001
From: HeskeyBaozi <hezhiyu233@foxmail.com>
Date: Sat, 4 Aug 2018 18:42:41 +0800
Subject: [PATCH] add icon features

---
 components/icon/demo/basic.md    |  4 ++-
 components/icon/index.tsx        | 52 ++++++++++++++++++++++++++------
 components/icon/style/index.less | 35 +++++++++++++++++++++
 components/icon/style/index.tsx  |  1 +
 package.json                     |  4 +--
 5 files changed, 83 insertions(+), 13 deletions(-)
 create mode 100644 components/icon/style/index.less

diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md
index ba6126a58c..f876deb3ab 100644
--- a/components/icon/demo/basic.md
+++ b/components/icon/demo/basic.md
@@ -18,9 +18,11 @@ import { Icon } from 'antd';
 
 ReactDOM.render(
   <div>
-    <Icon type="home" />
+    <Icon type="home" fixedWidth/>
+    <Icon type="message" flip="vertical" rotate={90}/>
     <Icon type="setting" />
     <Icon type="smile" />
+    <Icon type="smile" rotate={180}/>
     <Icon type="reload" spin />
   </div>,
   mountNode
diff --git a/components/icon/index.tsx b/components/icon/index.tsx
index 0791886093..ae8da35df2 100755
--- a/components/icon/index.tsx
+++ b/components/icon/index.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import omit from 'omit.js';
 import { antDesignIcons } from '@ant-design/icons';
-import AntdIcon from '@ant-design/icons-react';
+import ReactIcon from '@ant-design/icons-react';
 import CustomIcon, { create } from './CustomIcon';
 
-AntdIcon.add(...antDesignIcons);
+ReactIcon.add(...antDesignIcons);
+
+export type IconRotateNumber = 15 | 30 | 45 | 60 | 75
+  | 90 | 105 | 120 | 135 | 150 | 165 | 180 | 195 | 210
+  | 225 | 240 | 270 | 285 | 300 | 315 | 330 | 345 | 360;
 
 export interface IconProps {
   type: string;
@@ -14,17 +17,46 @@ export interface IconProps {
   onClick?: React.MouseEventHandler<any>;
   spin?: boolean;
   style?: React.CSSProperties;
+  svgStyle?: React.CSSProperties;
+  svgClassName?: string;
+  rotate?: IconRotateNumber;
+  flip?: 'horizontal' | 'vertical' | 'both';
+  fixedWidth?: true;
+  prefixCls?: string;
 }
 
 const Icon: React.SFC<IconProps> = (props: IconProps) => {
-  const { type, className = '', spin } = props;
-  const classString = classNames({
-    anticon: true,
-    'anticon-spin': !!spin || type === 'loading',
-  }, className);
+  const {
+    prefixCls = 'ant-icon',
+    type, className = '', spin, flip, fixedWidth,
+    svgClassName,
+    onClick, style, rotate = 0, svgStyle = {},
+  } = props;
+  const classString = classNames(
+    {
+      [`anticon`]: true,
+      [`anticon-spin`]: !!spin || type === 'loading',
+
+    },
+    className,
+  );
+
+  const svgClassString = classNames(
+    {
+      [`${prefixCls}-rotate-${rotate}`]: rotate,
+      [`${prefixCls}-flip-${flip}`]: flip,
+      [`${prefixCls}-fixed-width`]: fixedWidth,
+    },
+    svgClassName,
+  );
   return (
-    <i className={classString}>
-      <AntdIcon {...omit(props, ['type', 'spin', 'className'])} type={type} />
+    <i className={classString} style={style}>
+      <ReactIcon
+        className={svgClassString}
+        type={type}
+        onClick={onClick}
+        style={svgStyle}
+      />
     </i>
   );
 };
diff --git a/components/icon/style/index.less b/components/icon/style/index.less
new file mode 100644
index 0000000000..bc011b6428
--- /dev/null
+++ b/components/icon/style/index.less
@@ -0,0 +1,35 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@icon-prefix-cls: ~"@{ant-prefix}-icon";
+
+@step-forward: 15;
+
+.generate-rotation(@count, @i: @step-forward) when (@i <= @count) {
+  &-@{i} {
+    transform: rotate(~'@{i}deg');
+  }
+  .generate-rotation(@count, (@i + @step-forward));
+}
+
+.@{icon-prefix-cls} {
+  &-rotate {
+    .generate-rotation(360);
+  }
+
+  &-flip {
+    &-horizontal {
+      transform: scaleX(-1);
+    }
+    &-vertical {
+      transform: scaleY(-1);
+    }
+    &-both {
+      transform: scaleX(-1) scaleY(-1);
+    }
+  }
+  &-fixed-width {
+    width: 1.25em;
+    text-align: center;
+  }
+}
diff --git a/components/icon/style/index.tsx b/components/icon/style/index.tsx
index 2eab1f8ca5..3a3ab0de59 100644
--- a/components/icon/style/index.tsx
+++ b/components/icon/style/index.tsx
@@ -1 +1,2 @@
 import '../../style/index.less';
+import './index.less';
diff --git a/package.json b/package.json
index de8c3d9222..7a40fa4312 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,8 @@
     "react-dom": ">=16.0.0"
   },
   "dependencies": {
-    "@ant-design/icons": "^0.1.0-alpha.2",
-    "@ant-design/icons-react": "^0.1.0-alpha.6",
+    "@ant-design/icons": "^0.1.2-alpha.1",
+    "@ant-design/icons-react": "^0.1.2-alpha.2",
     "array-tree-filter": "^2.0.0",
     "babel-runtime": "6.x",
     "classnames": "~2.2.0",