Welcome UI - Avatar

import { Avatar } from 'welcome-ui/Avatar'

const Example = () => {
  return (
    <Avatar
      name="Welcome jungle"
      src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
    />
  )
}

export default Example

Examples

Size

You can use a size from the theme or override with a specific value e.g. size="md" or size="100px".

Image

Pass an image url with src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4".

Only text

If no image is provided we create a two-letter initial based on the name. We choose a random colour from secondary-xxx theme colours for the background. Font size is calculated automatically.

Note: if overriding the size, you must specify both a width and height to maintain the aspect-ratio and a (rational) font-size.