avatar

import { Avatar } from "woly";

Avatar shows user avatar

Example

<Playground>
  <Avatar src="https://image.flaticon.com/icons/png/512/168/168726.png" />
</Playground>

Sizes

<Playground>
  <block.N>
    <Avatar src="https://image.flaticon.com/icons/png/512/168/168726.png" />
  </block.N>
  <block.S>
    <Avatar src="https://image.flaticon.com/icons/png/512/168/168726.png" />
  </block.S>
  <block.M>
    <Avatar src="https://image.flaticon.com/icons/png/512/168/168726.png" />
  </block.M>
  <block.L>
    <Avatar src="https://image.flaticon.com/icons/png/512/168/168726.png" />
  </block.L>
  <block.XL>
    <Avatar src="https://image.flaticon.com/icons/png/512/168/168726.png" />
  </block.XL>
  <block.H>
    <Avatar src="https://image.flaticon.com/icons/png/512/168/168726.png" />
  </block.H>
</Playground>

Fallback

<Playground>
  <Avatar src="http://broken.url/image" />
</Playground>

Custom child component

RC
<Playground>
  <Avatar>
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'black',
        color: 'white',
        fontSize: '20px',
      }}
    >
      RC
    </div>
  </Avatar>
</Playground>

Props

NameTypeDefaultDescription
altstring''text description of the image
childrenReact.ReactNodeundefineduse if no src attributes provided
srcstring''avatar src
srcSetstring''avatar src set for multiple screen sizes