Avatar

Home
Installation
Customization
Icons
Essentials
- Alert new
- Avatar
- Badge
- Button
- Table
Forms
- Input
- Textarea
- Checkbox
- Select new
- Toggle
- Range new
- Radio Button
- File Input
- Date Picker
Interactives
- Dropdown
- Modal
- Progress
- Tabs new
- Theme Selector new
Layouts
- App Layout
- Centered Layout

It's the tiny picture or icon representing a person or thing, like your profile pic on social media.

Adding the component

php artisan spur:add essentials/avatar

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php

"components": [
  'essentials/avatar',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Simple Avatar

<x-spur.avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?fit=facearea&facepad=2&w=256&h=256&q=80" />

Different Sizes

You can use the size attribute with available options 10, 12, or 14

Otherwise, you can use the size-* tailwind class of you preference

<x-spur.avatar size="10" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?fit=facearea&facepad=2&w=256&h=256&q=80"/ />
<x-spur.avatar size="12" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?fit=facearea&facepad=2&w=256&h=256&q=80" />
<x-spur.avatar size="14" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?fit=facearea&facepad=2&w=256&h=256&q=80" />
<x-spur.avatar class="size-20" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?fit=facearea&facepad=2&w=256&h=256&q=80" />

Avatar Style

You can use the rounded attribute to have the rounded corner effect, otherwise it defaults to circular style

<x-spur.avatar size="10" rounded src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?fit=facearea&facepad=2&w=256&h=256&q=80" />
<x-spur.avatar size="14" rounded src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?fit=facearea&facepad=2&w=256&h=256&q=80" />
<x-spur.avatar size="10" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?fit=facearea&facepad=2&w=256&h=256&q=80" />
<x-spur.avatar size="14" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?fit=facearea&facepad=2&w=256&h=256&q=80" />

Avatar Initials

You can have initials assigned to the avatar by using initials attribute and passing maximum of 2 characters.

<x-spur.avatar initials="AD" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"/>
<x-spur.avatar initials="AD" />