1import { css } from '@emotion/react'; 2import { mergeClasses } from '@expo/styleguide'; 3import { spacing } from '@expo/styleguide-base'; 4import type { ElementType, HTMLAttributes } from 'react'; 5 6export type DocIconProps = HTMLAttributes<SVGSVGElement> & { 7 Icon?: ElementType; 8 small?: boolean; 9}; 10 11export const IconBase = ({ className, small, Icon, ...rest }: DocIconProps) => { 12 if (!Icon) return null; 13 14 return ( 15 <Icon 16 className={mergeClasses( 17 'inline-block', 18 small ? 'icon-sm' : 'icon-md', 19 'text-icon-default', 20 className 21 )} 22 css={iconStyles} 23 {...rest} 24 /> 25 ); 26}; 27 28const iconStyles = css({ 29 'table &, li &': { 30 verticalAlign: 'middle', 31 }, 32 33 'li &': { 34 marginTop: -spacing[0.5], 35 }, 36}); 37