jsx import { CSSObject , jsx } from '@emotion/core' ; import React from 'react' ; import type { SVGIconProps } from '../Icon/SVGIcon' ; import { COLOR } from '../Identity' ; import type { Theme } from '../Layout' ; import { childrenWithDefaultProps } from '../Misc/' ; import { ButtonProps , buttonStyle , filterButtonProps } from './Button' ; export interface RoundIconButtonProps < T = HTMLButtonElement > extends ButtonProps < T > { } export const roundIconButtonStyle = ( theme , props ) => ( { ... buttonStyle ( theme , props ) , alignItems : 'center' , borderRadius : '50%' , display : 'flex' , height : `${ props . size }px` , justifyContent : 'center' , lineHeight : 'initial' , margin : '0 auto' , minWidth : `${ props . size }px` , padding : 0 , width : `${ props . size }px` , } ) ; export const RoundIconButton = ( { children , ... props } ) => ( < button css = { theme => roundIconButtonStyle ( theme , props ) } { ... filterButtonProps ( props ) } > { childrenWithDefaultProps < SVGSVGElement , SVGIconProps > ( { children , defaultProps : { color : COLOR . WHITE } } ) } < /button>); RoundIconButton . defaultProps = { backgroundColor : COLOR . BLUE , size : 32 , } ;