Filament 自定义图标使用

2024-11-19

在 Filament 3 开发中，除了默认提供的 Heroicons 图标库外，可能需要使用其他图标库（如 Lucide、Tabler 等）。

本文将介绍几种在 Filament 中使用自定义图标的方法。

使用 blade-icons 包

这是最推荐的方法，因为维护简单、更新方便，而且有性能优化。

安装对应的图标包，以 Lucide 为例：

composer require mallardduck/blade-lucide-icons

在代码中直接使用：

use Filament\Resources\Table;

class ListUsers extends Resource 
{
    protected function getHeaderActions(): array
    {
        return [
            Actions\CreateAction::make()->icon('lucide-plus'),
        ];
    }       
}

更多图标库可以参考 blade-icons 的 README 文档。

使用自定义 SVG

如果需要使用特定的 SVG 图标，可以采用这种方式。

从图标网站下载需要的 SVG 图标
在 resources/svg 目录下保存图标文件

发布 blade-icons 配置：

php artisan vendor:publish --tag=blade-icons

在代码中使用：

Action::make('edit')
    ->icon('icon-pencil') // 使用自定义图标，`icon-` 是默认前缀

直接使用 SVG 视图

请注意 这种方式一般不建议使用，它仅适合只需要少量自定义图标的情况。

创建图标视图文件 resources/views/icons/edit.blade.php，内容如下：

<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <!-- 图标的 SVG 路径 -->
</svg>

在代码中使用：

Action::make('edit')
    ->icon(view('icons.edit'))

缓存优化

为了优化 Filament 以用于生产，应该在部署脚本中运行以下命令：

php artisan filament:optimize

该命令将缓存 Filament 组件和 Blade 图标，从而提高 Filament 面板的性能。