Avatar
# Introduction
Avatar component is designed to represent a avatar image or avatar initials. There are different avatar components, designed to fill fit all your needs.
# Image
The avatar component can be used to display an image. The image is displayed in a circular shape.
<zinq:avatar src="https://i.pravatar.cc/80?img=8" /># Alt Text
The alt text of the image can be customized. The default alt text is avatar
.
<zinq:avatar src="https://i.pravatar.cc/80?img=7" alt="John Doe" /># Initials
The string avatar component can be used to display initials. The initials are displayed in a circular shape.
<zinq:avatar-string>JD</zinq:avatar-string># Background
The background color of the avatar can be customized. The default background color is a dark lime.
<zinq:avatar-string color="bg-indigo-800">JD</zinq:avatar-string># User
For your convience, we have a user avatar component. The user avatar component can be used to display a user image or user initials. If given user has avatar, the user avatar component will display the user image. If the user does not have an avatar, the user avatar component will display the user initials.
Below is the logic:
- If the user has an avatar, the user avatar component will display the user image.
- If the user has name, the user avatar component will display the initials avatar.
- If the user has an email, the user avatar component will display the initials avatar from the user's email.
- Fallback: random letter.
<zinq:user-avatar :user="$user" /># Attributes
If your user entity has a different attribute name for the avatar, name or email, you can customize the attribute names.
<zinq:user-avatar :user="$user" avatar="avatar_link" name="full_name" email="primary_email" />