@asphalt-react/avatar v2.0.0-rc.0

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

size

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

resize

Resizes SVG

uppercase

Converts initials to uppercase

icon

Considers children as an SVG icon

image

Considers children as an image