add icon features

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

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 {
-  const classString = classNames({
+    prefixCls = 'ant-icon',
-    anticon: true,
+    type, className = '', spin, flip, fixedWidth,
-    'anticon-spin': !!spin || type === 'loading',
+    svgClassName,
-  }, className);
+    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}>
+    <i className={classString} style={style}>
-      <AntdIcon {...omit(props, ['type', 'spin', 'className'])} type={type} />
+      <ReactIcon
+        className={svgClassString}
+        type={type}
+        onClick={onClick}
+        style={svgStyle}
+      />
     </i>
   );
 };

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;
+  }
+}

components/icon/style/index.tsx

@@ -1 +1,2 @@
 import '../../style/index.less';
+import './index.less';

package.json

@@ -39,8 +39,8 @@
     "react-dom": ">=16.0.0"
   },
   "dependencies": {
-    "@ant-design/icons": "^0.1.0-alpha.2",
+    "@ant-design/icons": "^0.1.2-alpha.1",
-    "@ant-design/icons-react": "^0.1.0-alpha.6",
+    "@ant-design/icons-react": "^0.1.2-alpha.2",
     "array-tree-filter": "^2.0.0",
     "babel-runtime": "6.x",
     "classnames": "~2.2.0",