图标贯穿于整个 Filament UI,以视觉方式传达用户体验的核心部分。为了渲染图标,我们使用来自 Blade UI Kit 的 Blade Icons 包。
他们有一个网站,你可以在上面搜索所有可用的图标,这些图标来自各种 Blade Icons 包。每个包都包含一组不同的图标,供你选择。Filament 默认安装“Heroicons”图标集,因此,如果你正在使用此图标集中的图标,你无需安装任何额外的包。
Filament 默认包含 Heroicons 图标集。 您可以在您的 Filament 应用程序中使用此集中的任何图标,而无需安装任何额外的软件包。 Heroicon 枚举类允许您利用 IDE 的自动补全功能来查找您想要使用的图标:
use Filament\Actions\Action;
use Filament\Forms\Components\Toggle;
use Filament\Support\Icons\Heroicon;
Action::make('star')
->icon(Heroicon::OutlinedStar)
Toggle::make('is_starred')
->onIcon(Heroicon::Star)每个图标都带有一个“轮廓”和“实心”变体,其中“轮廓”变体的名称以 Outlined 为前缀。例如,Heroicon::Star 图标是实心变体,而 Heroicon::OutlinedStar 图标是轮廓变体。
Heroicons 图标集包含多种尺寸 (16px、20px 和 24px) 的纯色图标,并且当使用 Heroicon 枚举类时,Filament 将自动为你在其上下文中使用的图标选择正确尺寸。
如果您想在 Blade 组件 中使用图标,可以将其作为属性传递:
@php
use Filament\Support\Icons\Heroicon;
@endphp
<x-filament::badge :icon="Heroicon::Star">
Star
</x-filament::badge>一旦你已经 找到一个图标,安装了你希望在 Filament 中使用的图标集(如果它不是 Heroicon),你需要使用它的名称。例如,如果你想使用 iconic-star 图标,你可以将其传递给 PHP 组件的图标方法,像这样:
use Filament\Actions\Action;
use Filament\Forms\Components\Toggle;
Action::make('star')
->icon('iconic-star')
Toggle::make('is_starred')
->onIcon('iconic-check-circle')如果您想在 Blade 组件 中使用图标,您可以将其作为属性传递:
<x-filament::badge icon="iconic-star">
Star
</x-filament::badge>Blade Icons 包允许您将自定义 SVG 注册为图标。如果您想在 Filament 中使用自己的自定义图标,这将非常有用。
首先,发布 Blade Icons 配置文件:
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文件中进行配置。你还可以使用@svg('icon-star')指令在Blade视图中渲染自定义图标。
use Filament\Actions\Action;
Action::make('star')
->icon('icon-star')Filament 包含一个图标管理系统,允许您将 UI 中默认使用的任何图标替换为您自己的图标。这发生在任何服务提供者的 boot() 方法中,例如 AppServiceProvider,甚至是一个专用于图标的服务提供者。如果您想构建一个插件,用不同的图标集替换 Heroicons,您绝对可以通过创建一个带有类似服务提供者的 Laravel 包来实现。
要替换图标,您可以使用 FilamentIcon 外观。它有一个 register() 方法,该方法接受一个要替换的图标数组。数组的键是唯一的 图标别名,用于标识 Filament UI 中的图标,值是用于替换它的 Blade 图标名称。或者,您可以使用 HTML 而不是图标名称来从 Blade 视图渲染图标,例如:
use Filament\Support\Facades\FilamentIcon;
use Filament\View\PanelsIconAlias;
FilamentIcon::register([
PanelsIconAlias::GLOBAL_SEARCH_FIELD => 'fas-magnifying-glass',
PanelsIconAlias::SIDEBAR_GROUP_COLLAPSE_BUTTON => view('icons.chevron-up'),
]);使用类 Filament\Actions\View\ActionsIconAlias
ActionsIconAlias::ACTION_GROUP - 操作组的触发按钮ActionsIconAlias::CREATE_ACTION_GROUPED - 分组创建操作的触发按钮ActionsIconAlias::DELETE_ACTION - 删除操作的触发按钮ActionsIconAlias::DELETE_ACTION_GROUPED - 分组删除操作的触发按钮ActionsIconAlias::DELETE_ACTION_MODAL - 删除操作的模态框ActionsIconAlias::DETACH_ACTION - 分离操作的触发按钮ActionsIconAlias::DETACH_ACTION_MODAL - 分离操作的模态框ActionsIconAlias::DISSOCIATE_ACTION - 触发分离操作的按钮ActionsIconAlias::DISSOCIATE_ACTION_MODAL - 解关联操作的模态框ActionsIconAlias::EDIT_ACTION - 编辑操作的触发按钮ActionsIconAlias::EDIT_ACTION_GROUPED - 分组编辑操作的触发按钮ActionsIconAlias::EXPORT_ACTION_GROUPED - 分组导出操作的触发按钮ActionsIconAlias::FORCE_DELETE_ACTION - 强制删除操作的触发按钮ActionsIconAlias::FORCE_DELETE_ACTION_GROUPED - 分组强制删除操作的触发按钮ActionsIconAlias::FORCE_DELETE_ACTION_MODAL - 强制删除操作的模态框ActionsIconAlias::IMPORT_ACTION_GROUPED - 分组导入操作的触发按钮ActionsIconAlias::MODAL_CONFIRMATION - 需要确认的操作模态框ActionsIconAlias::REPLICATE_ACTION - 复制操作的触发按钮ActionsIconAlias::REPLICATE_ACTION_GROUPED - 分组复制操作的触发按钮ActionsIconAlias::RESTORE_ACTION - 触发恢复操作的按钮ActionsIconAlias::RESTORE_ACTION_GROUPED - 分组还原操作的触发按钮ActionsIconAlias::RESTORE_ACTION_MODAL - 恢复操作模态框ActionsIconAlias::VIEW_ACTION - 视图操作的触发按钮ActionsIconAlias::VIEW_ACTION_GROUPED - 分组视图操作的触发按钮使用类 Filament\Forms\View\FormsIconAlias
FormsIconAlias::COMPONENTS_BUILDER_ACTIONS_CLONE - 构建器项中克隆操作的触发按钮FormsIconAlias::COMPONENTS_BUILDER_ACTIONS_COLLAPSE - 构建器项中折叠操作的触发按钮FormsIconAlias::COMPONENTS_BUILDER_ACTIONS_DELETE - 构建器项中删除操作的触发按钮FormsIconAlias::COMPONENTS_BUILDER_ACTIONS_EXPAND - 构建器项中展开操作的触发按钮FormsIconAlias::COMPONENTS_BUILDER_ACTIONS_MOVE_DOWN - 构建器项中下移操作的触发按钮FormsIconAlias::COMPONENTS_BUILDER_ACTIONS_MOVE_UP - 构建器项中上移操作的触发按钮FormsIconAlias::COMPONENTS_BUILDER_ACTIONS_REORDER - 构建器项中重排操作的触发按钮FormsIconAlias::COMPONENTS_CHECKBOX_LIST_SEARCH_FIELD - 复选框列表中的搜索输入框FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_DRAG_CROP - 文件上传编辑器中拖拽裁剪操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_DRAG_MOVE - 文件上传编辑器中拖动移动操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_FLIP_HORIZONTAL - 文件上传编辑器中水平翻转操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_FLIP_VERTICAL - 文件上传编辑器中垂直翻转操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_MOVE_DOWN - 文件上传编辑器中的下移操作触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_MOVE_LEFT - 文件上传编辑器中向左移动操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_MOVE_RIGHT - 文件上传编辑器中向右移动操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_MOVE_UP - 文件上传编辑器中上移操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_ROTATE_LEFT - 文件上传编辑器中左旋转操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_ROTATE_RIGHT - 文件上传编辑器中向右旋转操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_ZOOM_100 - 文件上传编辑器中缩放100%操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_ZOOM_IN - 文件上传编辑器中放大操作的触发按钮FormsIconAlias::COMPONENTS_FILE_UPLOAD_EDITOR_ACTIONS_ZOOM_OUT - 文件上传编辑器中缩小操作的触发按钮FormsIconAlias::COMPONENTS_KEY_VALUE_ACTIONS_DELETE - 键值字段项中删除操作的触发按钮FormsIconAlias::COMPONENTS_KEY_VALUE_ACTIONS_REORDER - 键值字段项中重新排序操作的触发按钮FormsIconAlias::COMPONENTS_REPEATER_ACTIONS_CLONE - 中继器项中克隆操作的触发按钮FormsIconAlias::COMPONENTS_REPEATER_ACTIONS_COLLAPSE - 重复器项中折叠操作的触发按钮FormsIconAlias::COMPONENTS_REPEATER_ACTIONS_DELETE - 重复器项中删除操作的触发按钮FormsIconAlias::COMPONENTS_REPEATER_ACTIONS_EXPAND - 重复器项中展开操作的触发按钮FormsIconAlias::COMPONENTS_REPEATER_ACTIONS_MOVE_DOWN - 重复器项中向下移动操作的触发按钮FormsIconAlias::COMPONENTS_REPEATER_ACTIONS_MOVE_UP - 重复器项中的上移操作的触发按钮FormsIconAlias::COMPONENTS_REPEATER_ACTIONS_REORDER - 重复器项中重新排序操作的触发按钮FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCKS_CLOSE_BUTTON - 富文本编辑器中自定义区块面板的关闭按钮FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCK_DELETE_BUTTON - 富文本编辑器中自定义块的删除按钮FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCK_EDIT_BUTTON - 富文本编辑器中自定义块的编辑按钮FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_MERGE_TAGS_CLOSE_BUTTON - 富文本编辑器中合并标签面板的关闭按钮FormsIconAlias::COMPONENTS_SELECT_ACTIONS_CREATE_OPTION - 选择字段中创建选项操作的触发按钮FormsIconAlias::COMPONENTS_SELECT_ACTIONS_EDIT_OPTION - 选择字段中的编辑选项操作的触发按钮FormsIconAlias::COMPONENTS_TEXT_INPUT_ACTIONS_HIDE_PASSWORD - 文本输入字段中隐藏密码操作的触发按钮FormsIconAlias::COMPONENTS_TEXT_INPUT_ACTIONS_SHOW_PASSWORD - 文本输入框中显示密码操作的触发按钮FormsIconAlias::COMPONENTS_TOGGLE_BUTTONS_BOOLEAN_FALSE - "否" 选项 属于 一个 boolean() 切换按钮字段FormsIconAlias::COMPONENTS_TOGGLE_BUTTONS_BOOLEAN_TRUE - "真值"选项的 boolean() 切换按钮字段使用类 Filament\Infolists\View\InfolistsIconAlias
InfolistsIconAlias::COMPONENTS_ICON_ENTRY_FALSE - 图标条目的虚假状态InfolistsIconAlias::COMPONENTS_ICON_ENTRY_TRUE - 图标条目的真值状态使用类 Filament\Notifications\View\NotificationsIconAlias
NotificationsIconAlias::DATABASE_MODAL_EMPTY_STATE - 数据库通知模态框的空状态NotificationsIconAlias::NOTIFICATION_CLOSE_BUTTON - 关闭通知的按钮NotificationsIconAlias::NOTIFICATION_DANGER - 危险通知NotificationsIconAlias::NOTIFICATION_INFO - 信息通知NotificationsIconAlias::NOTIFICATION_SUCCESS - 成功通知NotificationsIconAlias::NOTIFICATION_WARNING - 警告通知使用类 Filament\View\PanelsIconAlias
PanelsIconAlias::GLOBAL_SEARCH_FIELD - 全局搜索字段PanelsIconAlias::PAGES_DASHBOARD_ACTIONS_FILTER - 仪表盘筛选操作的触发按钮PanelsIconAlias::PAGES_DASHBOARD_NAVIGATION_ITEM - 仪表板页面导航项PanelsIconAlias::PAGES_PASSWORD_RESET_REQUEST_PASSWORD_RESET_ACTIONS_LOGIN - 请求重置密码页面上登录操作的触发按钮PanelsIconAlias::PAGES_PASSWORD_RESET_REQUEST_PASSWORD_RESET_ACTIONS_LOGIN_RTL - 请求密码重置页面上登录操作的触发按钮(从右到左方向)PanelsIconAlias::RESOURCES_PAGES_EDIT_RECORD_NAVIGATION_ITEM - 资源编辑记录页面导航项PanelsIconAlias::RESOURCES_PAGES_MANAGE_RELATED_RECORDS_NAVIGATION_ITEM - 资源管理相关记录页面导航项PanelsIconAlias::RESOURCES_PAGES_VIEW_RECORD_NAVIGATION_ITEM - 资源视图记录页面导航项PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON - 折叠侧边栏的按钮PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL - 折叠侧边栏的按钮(从右到左方向)PanelsIconAlias::SIDEBAR_EXPAND_BUTTON - 侧边栏展开按钮PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL - 展开侧边栏按钮 (从右到左方向)PanelsIconAlias::SIDEBAR_GROUP_COLLAPSE_BUTTON - 侧边栏组的折叠按钮PanelsIconAlias::SIDEBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON - 打开数据库通知模态框的按钮PanelsIconAlias::TENANT_MENU_BILLING_BUTTON - 租户菜单中的账单按钮PanelsIconAlias::TENANT_MENU_PROFILE_BUTTON - 租户菜单中的个人资料按钮PanelsIconAlias::TENANT_MENU_REGISTRATION_BUTTON - 租户菜单中的注册按钮PanelsIconAlias::TENANT_MENU_TOGGLE_BUTTON - 切换租户菜单的按钮PanelsIconAlias::THEME_SWITCHER_LIGHT_BUTTON - 按钮,用于从主题切换器切换到浅色主题PanelsIconAlias::THEME_SWITCHER_DARK_BUTTON - 从主题切换器切换到深色主题的按钮PanelsIconAlias::THEME_SWITCHER_SYSTEM_BUTTON - 从主题切换器切换到系统主题的按钮PanelsIconAlias::TOPBAR_CLOSE_SIDEBAR_BUTTON - 关闭侧边栏的按钮PanelsIconAlias::TOPBAR_OPEN_SIDEBAR_BUTTON - 打开侧边栏的按钮PanelsIconAlias::TOPBAR_GROUP_TOGGLE_BUTTON - 顶栏组切换按钮PanelsIconAlias::TOPBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON - 打开数据库通知模态框的按钮PanelsIconAlias::USER_MENU_PROFILE_ITEM - 用户菜单中的个人资料项PanelsIconAlias::USER_MENU_LOGOUT_BUTTON - 用户菜单中的注销按钮PanelsIconAlias::USER_MENU_TOGGLE_BUTTON - 切换用户菜单的按钮PanelsIconAlias::WIDGETS_ACCOUNT_LOGOUT_BUTTON - 账户小部件中的注销按钮PanelsIconAlias::WIDGETS_FILAMENT_INFO_OPEN_DOCUMENTATION_BUTTON - 用于从 Filament 信息小部件打开文档的按钮PanelsIconAlias::WIDGETS_FILAMENT_INFO_OPEN_GITHUB_BUTTON - 从 Filament 信息小组件打开 GitHub 的按钮使用类 Filament\Schemas\View\SchemaIconAlias
SchemaIconAlias::COMPONENTS_WIZARD_COMPLETED_STEP - 向导中已完成的步骤使用类 Filament\Tables\View\TablesIconAlias
TablesIconAlias::ACTIONS_DISABLE_REORDERING - 禁用重新排序操作的触发按钮TablesIconAlias::ACTIONS_ENABLE_REORDERING - 启用重新排序操作的触发按钮TablesIconAlias::ACTIONS_FILTER - 筛选操作的触发按钮TablesIconAlias::ACTIONS_GROUP - 触发一组记录操作的按钮TablesIconAlias::ACTIONS_OPEN_BULK_ACTIONS - 打开批量操作动作的触发按钮TablesIconAlias::ACTIONS_COLUMN_MANAGER - 列管理器操作的触发按钮TablesIconAlias::COLUMNS_COLLAPSE_BUTTON - 折叠列的按钮TablesIconAlias::COLUMNS_ICON_COLUMN_FALSE - 图标列的假值状态TablesIconAlias::COLUMNS_ICON_COLUMN_TRUE - 图标列的真值状态TablesIconAlias::EMPTY_STATE - 空状态图标TablesIconAlias::FILTERS_QUERY_BUILDER_CONSTRAINTS_BOOLEAN - 查询构建器中布尔约束的默认图标TablesIconAlias::FILTERS_QUERY_BUILDER_CONSTRAINTS_DATE - 查询构建器中日期约束的默认图标TablesIconAlias::FILTERS_QUERY_BUILDER_CONSTRAINTS_NUMBER - 查询构建器中数字约束的默认图标TablesIconAlias::FILTERS_QUERY_BUILDER_CONSTRAINTS_RELATIONSHIP - 查询构建器中关系约束的默认图标TablesIconAlias::FILTERS_QUERY_BUILDER_CONSTRAINTS_SELECT - 查询构建器中选择约束的默认图标TablesIconAlias::FILTERS_QUERY_BUILDER_CONSTRAINTS_TEXT - 查询构建器中文本约束的默认图标TablesIconAlias::FILTERS_REMOVE_ALL_BUTTON - 移除所有筛选器的按钮TablesIconAlias::GROUPING_COLLAPSE_BUTTON - 折叠一组记录的按钮TablesIconAlias::HEADER_CELL_SORT_ASC_BUTTON - 升序排列的列的排序按钮TablesIconAlias::HEADER_CELL_SORT_BUTTON - 某一列的排序按钮,当它当前未排序时TablesIconAlias::HEADER_CELL_SORT_DESC_BUTTON - 降序排列的列的排序按钮TablesIconAlias::REORDER_HANDLE - Handle to grab in order to reorder a record with drag and dropTablesIconAlias::SEARCH_FIELD - 搜索输入使用类 Filament\Support\View\SupportIconAlias
SupportIconAlias::BADGE_DELETE_BUTTON - 删除徽章的按钮SupportIconAlias::BREADCRUMBS_SEPARATOR - 面包屑分隔符SupportIconAlias::BREADCRUMBS_SEPARATOR_RTL - 面包屑之间的分隔符(从右到左方向)SupportIconAlias::MODAL_CLOSE_BUTTON - 关闭模态框的按钮SupportIconAlias::PAGINATION_FIRST_BUTTON - 前往第一页的按钮SupportIconAlias::PAGINATION_FIRST_BUTTON_RTL - 前往第一页的按钮 (从右到左方向)SupportIconAlias::PAGINATION_LAST_BUTTON - 前往最后一页的按钮SupportIconAlias::PAGINATION_LAST_BUTTON_RTL - 跳转到最后一页的按钮 (右到左方向)SupportIconAlias::PAGINATION_NEXT_BUTTON - 用于前往下一页的按钮SupportIconAlias::PAGINATION_NEXT_BUTTON_RTL - 前往下一页的按钮(从右到左方向)SupportIconAlias::PAGINATION_PREVIOUS_BUTTON - 用于前往上一页的按钮SupportIconAlias::PAGINATION_PREVIOUS_BUTTON_RTL - 用于前往上一页的按钮 (从右到左的方向)SupportIconAlias::SECTION_COLLAPSE_BUTTON - 折叠部分的按钮使用类 Filament\Widgets\View\WidgetsIconAlias
WidgetsIconAlias::CHART_WIDGET_FILTER - 筛选操作的按钮