@asphalt-react/avatar

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