• Installation
• Usage
  • As the avatar provider
  • As a plugin
  • Replace filament's default avatar component
  • Extend or override
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

Change the default avatar url provider with one for inline SVGs.

No more external HTTP requests just for default avatars.

#Installation

You can install the package via composer:

composer require voltra/filament-svg-avatar

You can publish the config file with:

php artisan vendor:publish --tag="filament-svg-avatar-config"

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-svg-avatar-views"

This is the contents of the published config file:

return [
    /**
     * Global config of the SVG size
     *
     * @type ?int
     *
     * @default 500
     */
    'svgSize' => null,
 
    /**
     * Global config for the avatar's background color (as a hex code)
     *
     * @type ?string
     */
    'backgroundColor' => null,
 
    /**
     * Global config for the avatar's text color (as a hex code)
     *
     * @type ?string
     */
    'textColor' => null,
 
    /**
     * Global config for whether to disallow the plugin from overriding colors
     *
     * @type bool
     *
     * @default false
     */
    'disallowPluginOverride' => false,
 
    /**
     * Global config for the avatar's font-family
     *
     * @type ?string
     *
     * @default \Filament\Facades\Filament::getFontFamily()
     */
    'fontFamily' => null,
 
    /**
     * Global config of the SVG size
     *
     * @type ?string
     *
     * @default '.1em'
     */
    'textDy' => null,
];

#Usage

#As the avatar provider

Note SvgAvatarsProviders only renders properly if the font is available on the user's machine when the browser would decode the SVG as a base64 image.

If you want something portable, you'll need to replace Filament's default avatar component (see sections below).

class MyPanelProvider extends \Filament\PanelProvider {
    public function panel(\Filament\Panel $panel) {
        return $panel
            // [...]
            ->defaultAvatarProvider(\Voltra\FilamentSvgAvatar\Filament\AvatarProviders\SvgAvatarsProviders::class)
            // [...]
    }
}

#As a plugin

It automatically registers SvgAvatarsProviders as the avatar provider.

class MyPanelProvider extends \Filament\PanelProvider {
    public function panel(\Filament\Panel $panel) {
        return $panel
            // [...]
            ->plugins([
                // [...]
                \Voltra\FilamentSvgAvatar\FilamentSvgAvatarPlugin::make()
                    ->backgroundColor(\Spatie\Color\Hex::fromString('#3b5998'))
                    ->textColor(\Spatie\Color\Hex::fromString('#e9ebee')),
                // [...]
            ])
            // [...]
    }
}

NB: If you register the plugin and want to register a provider that isn't our SvgAvatarsProviders (e.g. to use RawSvgAvatarProvider), you'll have to register it manually AFTER the plugin. Other providers from this package can be registered before (or after) the plugin, but external providers need to be registered after the plugin.

class MyPanelProvider extends \Filament\PanelProvider {
    public function panel(\Filament\Panel $panel) {
        return $panel
            // [...]
            ->plugins([
                // [...]
                \Voltra\FilamentSvgAvatar\FilamentSvgAvatarPlugin::make()
                    ->backgroundColor(\Spatie\Color\Hex::fromString('#3b5998'))
                    ->textColor(\Spatie\Color\Hex::fromString('#e9ebee')),
                // [...]
            ])
            ->defaultAvatarProvider(\Voltra\FilamentSvgAvatar\Filament\AvatarProviders\RawSvgAvatarProvider::class)
            // [...]
    }
}

#Replace filament's default avatar component

First change the default avatar provider to use \Voltra\FilamentSvgAvatar\Filament\AvatarProviders\RawSvgAvatarProvider::class so that it can properly use the initials instead of a URL:

class MyPanelProvider extends \Filament\PanelProvider {
    public function panel(\Filament\Panel $panel) {
        return $panel
            // [...]
            ->defaultAvatarProvider(\Voltra\FilamentSvgAvatar\Filament\AvatarProviders\RawSvgAvatarProvider::class)
            // [...]
    }
}

Then you'll have to override filament's avatar blade component.

If you don't want to do it manually, just execute this command:

php artisan vendor:publish --tag=filament-svg-avatar-core-overrides

If you want to do it manually: either publish filament's support package's views, or just create the resources/views/vendor/filament/components/avatar.blade.php file with the following content.

@props([
    'circular' => true,
    'size' => 'md',
])
 
<x-filament-svg-avatar::avatar-override
    :attributes="$attributes"
    :circular="$circular"
    :size="$size"
></x-filament-svg-avatar::avatar-override>

This will use the <x-filament-svg-avatar::avatar/> component, configure it based on what <x-filament::avatar/> expects, and output an <svg> instead of an <img/> (which means better custom font support!).

#Extend or override

NB: Config values take precedence over overrides

Create a class that implements the \Voltra\FilamentSvgAvatar\Contracts\SvgAvatarServiceContract interface.

You can even extend from \Voltra\FilamentSvgAvatar\Services\FilamentSvgAvatarService.

Then, in a service provider, bind your implementation to the interface:

class MyServiceProvider extends \Illuminate\Support\ServiceProvider {
    // [...]
 
    public function register() {
        // [...]
        $this->app->scoped(\Voltra\FilamentSvgAvatar\Contracts\SvgAvatarServiceContract::class, MySvgAvatarServiceImpl::class);
        // [...]
    }
 
    // [...]
}

#Testing

composer test

#Changelog

Please see CHANGELOG for more information on what has changed recently.

#Contributing

Please see CONTRIBUTING for details.

#Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

#Credits

• Voltra
• All Contributors

#License

The MIT License (MIT). Please see License File for more information.