ant-design/components/icon/index.tsx
2018-08-07 16:35:26 +08:00

73 lines
1.5 KiB
TypeScript
Executable File

import * as React from 'react';
import classNames from 'classnames';
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);
export interface IconProps {
type: string;
className?: string;
title?: string;
onClick?: React.MouseEventHandler<any>;
spin?: boolean;
style?: React.CSSProperties;
svgStyle?: React.CSSProperties;
svgClassName?: string;
rotate?: number;
flip?: 'horizontal' | 'vertical' | 'both';
tag?: string;
prefixCls?: string;
}
const Icon: React.SFC<IconProps> = (props: IconProps) => {
const {
// prefixCls = 'ant-icon',
type,
className = '',
spin,
flip,
svgClassName,
tag = 'i',
onClick,
style,
rotate = 0,
svgStyle = {},
} = props;
const classString = classNames(
{
[`anticon`]: true,
[`anticon-spin`]: !!spin || type === 'loading',
},
className,
);
return React.createElement(
tag,
{
className: classString,
style,
onClick,
},
<ReactIcon
className={svgClassName}
type={type}
style={getComputedSvgStyle({ rotate, flip }, svgStyle)}
/>,
);
};
export type IconType = React.SFC<IconProps> & {
CustomIcon: typeof CustomIcon;
create: typeof create;
};
(Icon as IconType).CustomIcon = CustomIcon;
(Icon as IconType).create = create;
export default Icon as IconType;