Avatar

A circular element that displays a user's profile image or initials as a fallback.

<twig:Avatar>
    <twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
</twig:Avatar>

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

composer require --dev symfony/ux-toolkit

Then, install the recipe and its dependencies by running:

bin/console ux:install Avatar --kit shadcn

That's it!

Install the following Composer dependencies:

composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Avatar.html.twig

<span
    class="{{ 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ' ~ attributes.render('class')|tailwind_merge }}"
    data-slot="avatar"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>

templates/components/Avatar/Image.html.twig

<img
    class="{{ 'aspect-square h-full w-full ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes.defaults({alt: ''}) }}
/>

templates/components/Avatar/Text.html.twig

<span
    class="{{ 'flex h-full w-full items-center justify-center rounded-full bg-muted ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>

Happy coding!

Usage

<twig:Avatar>
    <twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
</twig:Avatar>

Examples

Avatar with Image

<twig:Avatar>
    <twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
</twig:Avatar>

Avatar with Text

<div class="flex gap-1">
    <twig:Avatar>
        <twig:Avatar:Text>FP</twig:Avatar:Text>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
    </twig:Avatar>
</div>

Avatar Group

<div class="flex -space-x-2">
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Text>FP</twig:Avatar:Text>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
    </twig:Avatar>
</div>