Avatar

<sw-avatar>

ready
The component helps adding a custom user image or initials to the administration.

Usage

Loading...
<div style="display: flex; align-items: center;">
<sw-avatar color="#dd4800"
           size="48px"
           firstName="John"
           style="margin: 0 10px;"
           lastName="Doe"></sw-avatar>

<sw-avatar size="48px"
           imageUrl="https://randomuser.me/api/portraits/women/68.jpg"></sw-avatar>
</div>

<sw-avatar size="48px"
           imageUrl="https://randomuser.me/api/portraits/men/68.jpg"
           :sourceContext="user"></sw-avatar>
</div>

Component properties

Property name Type Default
color String
size String
firstName String
lastName String
imageUrl String
placeholder Boolean false
sourceContext Object
variant String circle

Methods

Method name Parameters
mountedComponent No parameters
generateAvatarInitialsSize No parameters

Imports

  • ./sw-avatar.html.twig
  • ./sw-avatar.scss

Watcher

  • size

SASS variables

Variable name Value
$sw-avatar-size-default 40px

Twig blocks

  • sw_avatar_slot_imageUrl
  • sw_avatar_slot_placeholder
  • sw_avatar

Slots

  • default