README

Filament Icon Picker

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

当您想自定义前端渲染的图标，或者想让用户能够自定义导航图标，为他们的模型添加小图标以便于识别等情况时，这很有用。

安装

您可以通过 composer 安装此包。

Filament v3

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

Filament v2

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

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

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

这是发布配置文件的内容

<?php
return [

    'sets' => null,

    'columns' => 1,

    'layout' => \Guava\FilamentIconPicker\Layout::FLOATING,

    'cache' => [
        'enabled' => true,
        'duration' => '7 days',
    ],

];

用法

基本用法

在管理面板中的用法

use Guava\FilamentIconPicker\Forms\IconPicker;

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

在 Livewire 组件中的用法

use Guava\FilamentIconPicker\Forms\IconPicker;

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

在表格中的用法

// Make sure this is the correct import, not the filament one
use Guava\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许可证（MIT）。请参阅许可文件获取更多信息。

其他包

• Laravel Populator
• Filament Drafts