diff --git a/components/icon/CustomIcon.tsx b/components/icon/CustomIcon.tsx index ba174cf4fb..1aeb060633 100644 --- a/components/icon/CustomIcon.tsx +++ b/components/icon/CustomIcon.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import classNames from 'classnames'; import { Omit } from '../_util/type'; import { IconProps } from './index'; +import { getComputedSvgStyle } from './utils'; export interface CustomIconProps extends Omit { type?: string | SpriteSvgIcon; @@ -58,22 +59,11 @@ const CustomIcon: React.SFC = (props) => { 'anticon-spin': !!spin, }, className); - const svgClassString = classNames( - svgClassName, - ); - - const computedSvgStyle: React.CSSProperties = { - transform: `${rotate ? `rotate(${rotate}deg)` : ''} ` - + `${(flip === 'horizontal' || flip === 'both') ? `scaleX(-1)` : ''} ` - + `${(flip === 'vertical' || flip === 'both') ? `scaleY(-1)` : ''}`, - ...svgStyle, - }; - const innerSvgProps = { ...svgBaseProps, viewBox, - className: svgClassString, - style: computedSvgStyle, + className: svgClassName, + style: getComputedSvgStyle({ rotate, flip }, svgStyle), }; let content = ( diff --git a/components/icon/IconFont.tsx b/components/icon/IconFont.tsx index 5c1e9d3726..2ec05f703f 100644 --- a/components/icon/IconFont.tsx +++ b/components/icon/IconFont.tsx @@ -2,6 +2,7 @@ import { IconProps } from './index'; import * as React from 'react'; import classNames from 'classnames'; import { svgBaseProps } from './CustomIcon'; +import { getComputedSvgStyle } from './utils'; const customCache = new Set(); @@ -43,22 +44,11 @@ export default function create(options: CustomIconOptions = {}): React.Component className, ); - const computedSvgStyle: React.CSSProperties = { - transform: `${rotate ? `rotate(${rotate}deg)` : ''} ` - + `${(flip === 'horizontal' || flip === 'both') ? `scaleX(-1)` : ''} ` - + `${(flip === 'vertical' || flip === 'both') ? `scaleY(-1)` : ''}`, - ...svgStyle, - }; - - const svgClassString = classNames( - svgClassName, - ); - const innerSvgProps = { ...svgBaseProps, viewBox, - className: svgClassString, - style: computedSvgStyle, + className: svgClassName, + style: getComputedSvgStyle({ rotate, flip }, svgStyle), }; return React.createElement( diff --git a/components/icon/index.tsx b/components/icon/index.tsx index ce43870185..7dee8b8190 100755 --- a/components/icon/index.tsx +++ b/components/icon/index.tsx @@ -4,6 +4,7 @@ import { antDesignIcons } from '@ant-design/icons'; import ReactIcon from '@ant-design/icons-react'; import CustomIcon from './CustomIcon'; import create from './IconFont'; +import { getComputedSvgStyle } from './utils'; ReactIcon.add(...antDesignIcons); @@ -45,17 +46,6 @@ const Icon: React.SFC = (props: IconProps) => { className, ); - const svgClassString = classNames( - svgClassName, - ); - - const computedSvgStyle: React.CSSProperties = { - transform: `${rotate ? `rotate(${rotate}deg)` : ''} ` - + `${(flip === 'horizontal' || flip === 'both') ? `scaleX(-1)` : ''} ` - + `${(flip === 'vertical' || flip === 'both') ? `scaleY(-1)` : ''}`, - ...svgStyle, - }; - return React.createElement( tag, { @@ -64,9 +54,9 @@ const Icon: React.SFC = (props: IconProps) => { onClick, }, , ); }; diff --git a/components/icon/utils.ts b/components/icon/utils.ts new file mode 100644 index 0000000000..087ca2af77 --- /dev/null +++ b/components/icon/utils.ts @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { IconProps } from './index'; + +type TransformInformation = Pick; + +export function getComputedSvgStyle( + { rotate, flip }: TransformInformation, + svgStyle: React.CSSProperties, +): React.CSSProperties { + + if (!(rotate || flip)) { + return { ...svgStyle }; + } + + return { + transform: `${rotate ? `rotate(${rotate}deg)` : ''} ` + + `${(flip === 'horizontal' || flip === 'both') ? `scaleX(-1)` : ''} ` + + `${(flip === 'vertical' || flip === 'both') ? `scaleY(-1)` : ''}`, + ...svgStyle, + }; +} diff --git a/package.json b/package.json index 2fb1fad085..04b855a599 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "rc-select": "~8.1.1", "rc-slider": "~8.6.0", "rc-steps": "~3.1.0", - "rc-switch": "~1.6.0", + "rc-switch": "~1.7.0", "rc-table": "~6.2.0", "rc-tabs": "~9.3.3", "rc-time-picker": "~3.3.0",