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

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

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?