Avatar

Avatar component represents people or objects. It also provides additional visual information about a user. It supports images, SVGs and lettered initials. Initials & SVG's are resizable based on Avatar size . You can disable this behavior only for SVG. Avatar renders its background color if it's children is smaller than it's size.

Avatar is compatible with raster images, SVG or icons from @asphalt-react/iconpack

Usage

import { Avatar } from "@asphalt-react/avatar"

function App() {
  return (
    <Avatar>
      <img
        src="images/avatar.png"
        alt="dummy avatar"
        aria-label="dummy avatar"
      />
    </Avatar>
  )
}

Content hints

You can hint Avatar about the content that you pass as children. It has 3 content hints:

• initials: expects textual content
• icon: expects SVGs
• image: expects images (either raster or vector)

These content hints help Avatar to add features, like applying font styles to initials. Avatar doesn't enforce content type.

Resize SVG

Avatar resizes SVGs ("icon" content hint) by default. To disable this behaviour and use a custom size, set the resize prop to false.

Props

children

Image or letters to display

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

size

Renders the Avatar with the provided size. accepts xxs, xs, s, m, l, xl, xxl sizes.

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

resize

Resizes SVG

| type | required | default | | ---- | -------- | ------- | | bool | false | true |

uppercase

Converts initials to uppercase

| type | required | default | | ---- | -------- | ------- | | bool | false | true |

icon

Considers children as an SVG icon

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

image

Considers children as an image

| type | required | default | | ---- | -------- | ------- | | bool | false | false |