voltra / filament-svg-avatar
Change the default avatar url provider with one for inline SVGs
Fund package maintenance!
Voltra
Requires
- php: ^8.1
- filament/filament: ^3.0
- illuminate/contracts: ^10.0||^11.0
- spatie/laravel-package-tools: ^1.15.0
Requires (Dev)
- larastan/larastan: ^2.9
- laravel/facade-documenter: dev-main
- laravel/pint: ^1.0
- nunomaduro/collision: ^7.9
- orchestra/testbench: ^8.0
- pestphp/pest: ^2.0
- pestphp/pest-plugin-arch: ^2.0
- pestphp/pest-plugin-laravel: ^2.0
- pestphp/pest-plugin-watch: ^2.0
- phpstan/extension-installer: ^1.1
- phpstan/phpstan-deprecation-rules: ^1.0
- phpstan/phpstan-phpunit: ^1.0
README
voltra/filament-svg-avatar
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
License
The MIT License (MIT). Please see License File for more information.