版本：3.0

图标

概述

图标用在整个 Filament UI 中，用来与用户体验的核心部分进行视觉交流。我们使用 Blade UI Kit 的 Blade Icons 包来渲染图标。

可以在他们网站中搜索所有可用的图标，这些图标来自多个 Blade Icon 包。每个包都包含一套不同的图标集。

使用自定义 SVG 作为图标

Blade Icons 包允许你注册自定义的 SVG 作为图标。如果你想在 Filament 中自定义图标，这个功能很有用。

首先，发布 Blade Icon 配置文件：

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

然后打开 config/blade-icons.php 文件，并取消 sets 数组中 default 设置的注释。

既然默认设置存在于配置文件中，您只需将所需的任何图标放在应用程序的 resources/svg 目录中即可。比如，如果你将一个名为 star.svg 的 SVG 文件放到 resources/svg 目录下，你可用在 Filament 的任何地方以 icon-star 引用它。icon- 前缀也是在 config/blade-icons.php 文件中配置。你也可用在 Blade 视图中使用 @svg('icon-star') 指令渲染这个自定义图标。

替换默认图标

Filament 包含一个图标管理系统，让你可用替换任何在你自己的 UI 中使用的默认图标。在服务提供者(比如 AppServiceProvider、或者图标专用的服务提供者)的 boot() 方法中实现。如果你想创建一个插件使用不同的图标集替换 Heroicon，你应该创建一个带有类似服务提供者的 Laravel 包实现。

要替换图标，你可以使用 FilamentIcon 门面。它有个 register() 方法，接收一个图标数组用以替换。数组的键是唯一的图标别名，用以在 Filament UI 中识别该图标，值是 Blade 图标的名称：

use Filament\Support\Facades\FilamentIcon;

FilamentIcon::register([
    'panels::topbar.global-search.field' => 'fas-magnifying-glass',
    'panels::sidebar.group.collapse-button' => 'fas-chevron-up',
]);

允许用户在插件中自定义图标

如果你创建了一个 Filament 插件，用户可能希望可以用与 Filament 核心包中一样的方式自定义图标。如果你将任何手动的 @svg() 用法替换程 <x-filament::icon> Blade 组件，那么这是可能的。该组件允许你传入一个图标别、默认使用的 SVG 图标的名称，及其他类及 HTML 属性：

<x-filament::icon
    alias="panels::topbar.global-search.field"
    icon="heroicon-m-magnifying-glass"
    wire:target="search"
    class="h-5 w-5 text-gray-500 dark:text-gray-400"
/>

此外，你可以传入一个 SVG 元素到组件的 slot 插槽中，而不必定义默认图标名：

<x-filament::icon
    alias="panels::topbar.global-search.field"
    wire:target="search"
    class="h-5 w-5 text-gray-500 dark:text-gray-400"
>
    <svg>
        <!-- ... -->
    </svg>
</x-filament::icon>

可用图标别名

后台面板图标别名

panels::database-notifications.open-button - 用来打开数据库通知模态框的按钮
panels::global-search.field - 全局搜索字段
panels::pages.dashboard.navigation-item - 仪表盘导航项
panels::pages.tenancy.register-tenant.open-tenant-button - 从租户注册页面打开租户的按钮
panels::sidebar.collapse-button - 可部分折叠的桌面端侧边栏折叠按钮
panels::sidebar.collapse-button.full - 可完全折叠的桌面端侧边栏折叠按钮
panels::sidebar.group.collapse-button - 侧边栏分钟的折叠按钮
panels::tenant-menu.toggle-button - 切换租户菜单的按钮u
panels::theme-switcher.light-button - 主题切换器中切换到light主题的按钮
panels::theme-switcher.dark-button - 主题切换器中切换到dark主题的按钮
panels::theme-switcher.system-button - 主题切换器中切换系统主题的按钮
panels::topbar.close-mobile-sidebar-button - 关闭移动侧边栏的按钮
panels::topbar.open-mobile-sidebar-button - 打开移动侧边栏的按钮
panels::user-menu.profile-item - 用户菜单中的 Profile 项
panels::user-menu.logout-button - 用户菜单中的退出按钮
panels::widgets.account.logout-button - 账号插件中的退出按钮
panels::widgets.filament-info.open-documentation-button - 从 Filament Info 插件中打开文档的按钮
panels::widgets.filament-info.open-github-button - 从 Filament Info 插件中打开 GitHub 的按钮

表单构造器中的图标别名

forms:components.checkbox-list.search-field - 复选框列表中的搜索输入框
forms::components.wizard.completed-step - 向导卡中的完成步骤

表格构造器中的图标别名

tables::columns.collapse-button
tables::filters.remove-all-button - 删除所有过滤器的按钮
tables::grouping.collapse-button - 用于折叠一组记录的按钮
tables::header-cell.sort-asc-button - 以升序排列的排序按钮
tables::header-cell.sort-desc-button - 以降序排列的排序按钮
tables::reorder.handle - 使用拖拽、拖放对记录重新排序的抓手
tables::search-field - 搜索输入框

通知生成器中的图标别名

notifications::database.modal.empty-state - 数据库通知模态框的空状态
notifications::notification.close-button - 关闭通知的按钮

UI 组件中的图标别名

badge.delete-button - 删除徽章的按钮
breadcrumbs.separator - 面包屑之间的分隔符
modal.close-button - 关闭模态框的按钮
pagination.previous-button - 上一页按钮
pagination.next-button - 下一页按钮
section.collapse-button - 折叠区域的按钮

概述​

使用自定义 SVG 作为图标​

替换默认图标​

允许用户在插件中自定义图标​

可用图标别名​

后台面板图标别名​

表单构造器中的图标别名​

表格构造器中的图标别名​

通知生成器中的图标别名​

UI 组件中的图标别名​

概述