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>

Component properties

Property name Type Default
color String
size String
firstName String
lastName String
imageUrl String
placeholder Boolean false

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