Avatar

<!-- avatar.blade.php -->

    <div class="c-avatar c-avatar--size-md" data-uid="69f0d123672d3" data-component="avatar">
        
        
                        <!-- image.blade.php -->
    <figure class="c-image c-avatar__image c-image--cover" aria-label="Cookie Monster" data-uid="69f0d12367395" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/64/70/70" 
    alt="Cookie Monster"
    
></div>                        </figure>

        
        
        
        
                
    </div>

@avatar(
    [
        'image' => "https://picsum.photos/id/64/70/70",
        'name' => "Cookie Monster"
    ]
)
@endavatar

<!-- avatar.blade.php -->

    <div class="c-avatar c-avatar--size-md" data-uid="69f0d12367806" data-component="avatar">
        
        
        
        
        
        
                    <svg class="c-avatar__initials" aria-label="Cookie Monster" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">CM</text>
            </svg>
                
    </div>

@avatar(
    [
        'name' => "Cookie Monster"
    ]
)
@endavatar

<!-- avatar.blade.php -->

    <div class="c-avatar c-avatar--size-md" data-uid="69f0d12367b9d" data-component="avatar">
        
        
        
        
                    <span class="c-avatar__icon" aria-label="Cookie Monster">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--size-xl c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d12367d32" data-component="icon">
                    </span>
            </span>
        
        
                
    </div>

@avatar(
    [
        'name' => "Cookie Monster",
        'icon' => [
            'name' => 'favorite',
            'size' => 'xl'
        ]
    ]
)
@endavatar