import React , { HTMLAttributes } from 'react' ; import classnames from 'classnames/dedupe' ; import BasePropsType from './interface' ; import createFromIconfont from './IconFont' ; const INNER_SVG_PROPS = { width : '1em' , height : '1em' , fill : 'currentColor' , viewBox : '0 0 32 32' , } ; export type IconProps = { prefixCls ? : string ; } & BasePropsType & HTMLAttributes < HTMLElement > ; interface CompoundedComponent extends React . ForwardRefExoticComponent < IconProps & React . RefAttributes < HTMLElement > > { createFromIconfont : typeof createFromIconfont ; } const Icon = React . forwardRef < HTMLElement , IconProps > ( ( props , ref ) => { const { className , type , style , prefixCls , theme , size , children , component : SvgComponent , viewBox , ... rest } = props ; const cls = classnames ( prefixCls , className , { [ `${ prefixCls }--${ type }` ] : ! ! type , [ `${ prefixCls }--${ theme }` ] : ! ! theme , [ `${ prefixCls }--${ size }` ] : ! ! size , } ) ; const newProps = { className : cls , style , type , theme , size , ... rest , } ; if ( SvgComponent ) { INNER_SVG_PROPS . viewBox = viewBox ! ; return ( < i { ... newProps } ref = { ref } > < SvgComponent { ... INNER_SVG_PROPS } > { children } < /SvgComponent> < /i>); } if ( children ) { return ( < i { ... newProps } ref = { ref } > < svg { ... INNER_SVG_PROPS } > { children } < /svg> < /i>); } if ( type ) { const MyIcon = createFromIconfont ( '//at.alicdn.com/t/font_1285036_9ze0vm44z57.js' ) ; return < MyIcon { ... newProps } / > ; } return null ; } ) as CompoundedComponent ; Icon . createFromIconfont = createFromIconfont ; Icon . displayName = 'Icon' ; Icon . defaultProps = { prefixCls : 'za-icon' , theme : 'default' , size : 'md' , viewBox : INNER_SVG_PROPS . viewBox , } ; export default Icon ;