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(
-
+
+
+
,
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;
spin?: boolean;
style?: React.CSSProperties;
+ svgStyle?: React.CSSProperties;
+ svgClassName?: string;
+ rotate?: IconRotateNumber;
+ flip?: 'horizontal' | 'vertical' | 'both';
+ fixedWidth?: true;
+ prefixCls?: string;
}
const Icon: React.SFC = (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 (
-
-
+
+
);
};
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",