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",