const ProfileIconContainer = styled.div` position: relative; display: flex; justify-content: center; align-items: center; ${({ width }) => width && `width: ${width};`} ${({ height }) => height && `height: ${width};`} `; const accountId = props.accountId; const width = props.width ?? '24px'; const height = props.height ?? '24px'; return ( <ProfileIconContainer width={width} height={height}> <Widget src={`${props.componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.Image`} props={{ accountId, alt: `profile-icon-${accountId}`, className: 'rounded-circle', style: { width: width, height: height, objectFit: 'cover' }, thumbnail: 'thumbnail', fallbackUrl: 'https://i.imgur.com/e8buxpa.png', }} /> </ProfileIconContainer> );