voltra/filament-svg-avatar

使用内联SVGs的默认头像URL提供程序

1.2.7 2024-04-13 21:02 UTC

This package is auto-updated.

Last update: 2024-09-16 17:09:26 UTC


README

Filament Svg Avatar: Change the default avatar url provider with one for inline SVGs

voltra/filament-svg-avatar

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

将默认头像URL提供程序更改为内联SVGs的提供程序。

不再为默认头像进行外部HTTP请求。

安装

您可以通过composer安装此包

composer require voltra/filament-svg-avatar

您可以使用以下命令发布配置文件

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

可选:您可以使用以下命令发布视图

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

这是已发布配置文件的内容

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,
];

使用方法

作为头像提供程序

注意:SvgAvatarsProviders仅在用户的机器上安装了字体时才能正确渲染,当浏览器将SVG解码为base64图像时。

如果您想要一个便携的版本,您需要替换Filament的默认头像组件(参见以下部分)。

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

作为一个插件

它自动将SvgAvatarsProviders注册为头像提供程序。

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')),
                // [...]
            ])
            // [...]
    }
}

注意:如果您注册了插件并想要注册不是我们的SvgAvatarsProviders的提供程序(例如,要使用RawSvgAvatarProvider),您必须在插件之后手动注册它。其他来自此包的提供程序可以在插件之前(或之后)注册,但外部提供程序必须在插件之后注册。

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)
            // [...]
    }
}

替换filament的默认头像组件

首先将默认头像提供程序更改为使用\Voltra\FilamentSvgAvatar\Filament\AvatarProviders\RawSvgAvatarProvider::class,以便它可以使用首字母而不是URL。

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

然后您需要重写filament的头像blade组件。

如果您不想手动操作,只需执行以下命令

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

如果您想手动操作:发布filament支持包的视图,或者只需创建一个包含以下内容的resources/views/vendor/filament/components/avatar.blade.php文件。

@props([
    'circular' => true,
    'size' => 'md',
])

<x-filament-svg-avatar::avatar-override
    :attributes="$attributes"
    :circular="$circular"
    :size="$size"
></x-filament-svg-avatar::avatar-override>

这将使用<x-filament-svg-avatar::avatar/>组件,根据<x-filament::avatar/>的要求进行配置,并输出<svg>而不是<img/>(这意味着更好的自定义字体支持!)。

扩展或重写

注意:配置值优先于重写。

创建一个实现\Voltra\FilamentSvgAvatar\Contracts\SvgAvatarServiceContract接口的类。

您甚至可以从\Voltra\FilamentSvgAvatar\Services\FilamentSvgAvatarService扩展。

然后,在一个服务提供程序中,将您的实现绑定到接口

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

    // [...]
}

测试

composer test

变更日志

有关最近更改的更多信息,请参阅变更日志

贡献

有关详细信息,请参阅贡献指南

安全漏洞

请参阅我们的安全策略,了解如何报告安全漏洞。

鸣谢

许可证

MIT许可证(MIT)。有关更多信息,请参阅许可证文件