Filament图标选择器：一个全面的指南

喻季福

于 2024-09-11 08:18:09 发布

阅读量731

点赞数 8

本文链接：https://blog.csdn.net/gitblog_00535/article/details/142119775

版权

Filament图标选择器：一个全面的指南

filament-icon-picker An icon picker field for Filament 项目地址: https://gitcode.com/gh_mirrors/fi/filament-icon-picker

1. 项目介绍

Filament图标选择器是一个专为PHP框架Filament设计的扩展包，它提供了图标挑选器组件和图标列表列，极大地增强了后台管理界面的交互性和视觉效果。这个工具包基于TailwindCSS风格，支持Heroicons等图标集，并允许轻松集成自定义图标库，如BoxIcons，以丰富您的应用程序UI元素。通过简洁的API，开发者可以无缝地在表单中添加图标选择功能，并在数据表格中显示图标，提高了用户体验。

2. 项目快速启动

要快速启动并运行Filament图标选择器，首先确保你的环境已经安装了FilamentPHP，并配置好Laravel或Lumen项目。以下是基本步骤：

安装依赖

在项目根目录下，通过Composer添加此扩展包:

composer require tomatophp/filament-icons

配置图标

接下来，在服务提供者中注册图标包（以Laravel为例）：

// 在app/Providers/AppServiceProvider.php 中的boot方法内添加以下代码
use TomatoPHP\FilamentIcons\Facades\FilamentIcons;

public function boot()
{
    FilamentIcons::register('boxicons')
        ->asset('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css')
        ->template('<i class="[ICON]"></i>', 'text-xl', 'text-sm')
        ->icons([...your-icons-array...])
        ->replace(['bx ', 'bxs-', 'bxl-', 'bx-'])
        ->save();
}

清缓存并安装图标资源：

php artisan filament-icons:clear
php artisan filament-icons:install

发布资产和配置

为了将视图文件和配置整合到你的项目中，执行：

php artisan vendor:publish --tag="filament-icons-views"
php artisan vendor:publish --tag="filament-icons-config"

示例用法

在Filament表单或表格中使用图标选择器：

use TomatoPHP\FilamentIcons\Components\IconPicker;
use TomatoPHP\FilamentIcons\Components\IconColumn;

// 表单中的图标选择
public static function form(Form $form): Form
{
    return $form->schema([
        IconPicker::make('icon')->default('heroicon-o-academic-cap')->label('图标'),
    ]);
}

// 数据表格中的图标列
public static function table(Table $table): Table
{
    return $table->columns([
        IconColumn::make('icon')->label('图标'),
    ]);
}