Avatar

The QAvatar component creates a scalable, color-able element that can have text, icon or image within its shape. By default it is circular, but it can also be square or have a border-radius applied to give rounded corners to the square shape.

It is often used with other components in their slots.

Installation

Quasar CLI

UMD

Vue CLI

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QAvatar'
    ]
  }
}

Usage

TIP

The size property will determine the height and the width of the Avatar. The font-size property will set the size of the font used within the Avatar, which will have an effect on the size of letters and icons.

QAvatar API

Ready for more?