README

Filament Icon Picker

此插件添加了一个新的图标选择器表单字段和相应的表格列。您可以使用它从您已安装的任何blade-icons套件中选择。默认情况下，heroicons受到支持，因为它与Filament一起发货。

当您想要自定义前端上渲染的图标、如果想要用户能够自定义导航图标、添加小图标以方便识别等情况时，这非常有用。

安装

您可以通过composer安装此包

Filament v3

composer require TareqAlqadi/filament-icon-picker:"^2.0"

Filament v2

composer require TareqAlqadi/filament-icon-picker:"^1.0"

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

php artisan vendor:publish --tag="filament-icon-picker-config"

这是发布配置文件的内容

<?php
return [

    'sets' => null,

    'columns' => 1,

    'layout' => \TareqAlqadi\FilamentIconPicker\Layout::FLOATING,
    
    'cache' => [
        'enabled' => true,
        'duration' => '7 days',
    ],

];

用法

基本用法

在管理面板中使用

use TareqAlqadi\FilamentIconPicker\Forms\IconPicker;

public static function form(Form $form): Form
{
    return $form->schema([
        IconPicker::make('icon');
    ]);
}

在Livewire组件中使用

use TareqAlqadi\FilamentIconPicker\Forms\IconPicker;

protected function getFormSchema(): array
{
    return [
        IconPicker::make('icon'),
    ];
}

在表格中使用

// Make sure this is the correct import, not the filament one
use TareqAlqadi\FilamentIconPicker\Tables\IconColumn;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            IconColumn::make('icon'),
        ])
        // ...
        ;
}

字段的返回值是所选图标的标识符。

假设我们在$category模型下保存了图标$icon，您可以在blade视图中使用以下代码来渲染它

<x-icon name="{{ $category->icon }}" />

有关在blade-icons github上渲染图标的更多信息。

选项

列

默认情况下，将显示单列图标选择器。您可以通过icon-picker.columns配置或使用->columns()选项来自定义列数，如下所示

// Display 3 columns from lg and above
IconPicker::make('icon')
    ->columns(3); 
    
// More detailed customization
// This will display 1 column from xs to md, 3 columns from lg to xl and 5 columns from 2xl and above
IconPicker::make('icon')
    ->columns([
        'default' => 1,
        'lg' => 3,
        '2xl' => 5,
    ]);

集合

默认情况下，插件将使用所有可用的blade图标集。如果您只想使用特定的图标集，您可以通过icon-picker.sets配置或逐个更改默认设置

// Search both herocions and fontawesome icons
IconPicker::make('icon')
    ->sets(['heroicons', 'fontawesome-solid']); 

安装新集合时，请确保清除您的缓存，如果您在图标选择器中找不到图标。

允许/禁止图标

为了对图标进行更详细的控制，有两个选项可用于允许和禁止某些图标。

// Allow ONLY heroicon-o-user and heroicon-o-users
IconPicker::make('icon')
    ->allowIcons(['heroicon-o-user', 'heroicon-o-users']);

// Allow ALL fontawesome icons, EXCEPT fas-user
IconPicker::make('icon')
    ->disallowIcons(['fas-user']); 

布局

图标选择器提供了两种布局。默认的Layout::FLOATING是Filament Selects中使用的标准布局。搜索结果将出现在一个弹出窗口中。

Layout::ON_TOP将始终在页面上渲染搜索结果。

// 
IconPicker::make('icon')
    ->layout(Layout::FLOATING) // default
    //or
    ->layout(Layout::ON_TOP)

自定义项目模板

默认情况下，搜索结果会渲染图标的预览及其标识符。您可以使用->itemTemplate()选项来自定义此内容

// Render your.blade.template instead of the default template.  
// Make sure to pass the $icon as parameter to be able to render it in your view.
IconPicker::make('icon')
    ->itemTemplate(fn($icon) => view('your.blade.template', ['icon' => $icon]));

缓存

根据您使用的图标包的数量及其大小，获取搜索结果的时间可能会很高。为了稍微减轻这个问题，搜索结果默认会进行缓存（7天）。

您可以在配置文件中配置所有图标选择器的默认缓存选项。

要配置特定的IconPicker，这些方法可用

IconPicker::make('icon')
    // Disable caching
    ->cacheable(false)
    
    // Cache for one hour
    ->cacheDuration(3600);

变更日志

请参阅CHANGELOG以获取有关最近更改的更多信息。

贡献

请参阅CONTRIBUTING以获取详细信息。

安全漏洞

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

致谢

• Lukas Frey
• 所有贡献者

许可证

麻省理工学院许可证（MIT）。更多信息请参阅许可证文件。

其他包

• Laravel Populator
• Filament Drafts