图标

#简介

图标用于整个 Filament UI 中，直观地传达用户体验的核心部分。要渲染图标，我们使用了 Blade UI 套件的 Blade 图标。

他们有一个网站，你可以在那里搜索来自于各个 Blade Icon 包的所有可用的图标。每个包都包含一个不同的图标集，你可以从中进行选择。Filament 默认安装 “Heroicons” 图标集，因此如果你使用此图标集的图标，则不需要安装任何其他软件包。

#在 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” 和 “solid” 变体，有 “outlined” 变体名的图标以 Outlined 作为前缀。比如，Heroicon::Star 图标是 solid 变体，而 Heroicon::OutlinedStar 图标则是 outlined 变体。

Heroicon 图标集包含实心(solid)图标的多个尺码(16px, 20px and 24px)，当使用 Heroicon 枚举类时，Filament 将在你使用图标的地方自动使用对应的大小。

如果你想在 Blade 组件中使用图标，你可以将其作为属性传入：

@php
    use Filament\Support\Icons\Heroicon;
@endphp

<x-filament::badge :icon="Heroicon::Star">
    Star
</x-filament::badge>

#在 Filament 中使用其他图标集

如果你看到了一个想使用的图标，请在 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>

#使用自定义 SVG 作为图标

Blade 图标包允许你将自定义 SVG 注册成图标。如果你想在 Filament 中使用自定义图标，这很有用。

首先，请先发布 Blade 图标配置文件：

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

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

现在配置文件中存在默认设置，你可以将任何想要使用的图标放到应用的 resources/svg 目录中。比如，你将一个名为 star.svg 的 SVG 文件放入 resources/svg 目录中，你可以在 Filment 中的任何地方使用 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，甚至可以为图标创建一个专用的服务提供者。如果你想创建一个插件将 Heroicon 图标替换成其他图标库，你可以创建一个 Laravle 包，附上类似的服务提供者来实现。

要替换图标，请使用 FilamentIcon facade。它有一个 register() 方法，该方法接受一个要替换的图标数组。数组的键是唯一的图标别名，用以在 Filament UI 中识别图标；数组值是要替换的 Blade 图标名。此外，你可以使用 HTML 替换图标名来渲染 Blade 视图中的图标，比如：

use Filament\Support\Facades\FilamentIcon;

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

#可用图标别名

#Action 图标别名

• actions::action-group - Action 分组的触发按钮
• actions::create-action.grouped - Trigger button of a grouped create action
• actions::delete-action - Trigger button of a delete action
• actions::delete-action.grouped - Trigger button of a grouped delete action
• actions::delete-action.modal - Modal of a delete action
• actions::detach-action - Trigger button of a detach action
• actions::detach-action.modal - Modal of a detach action
• actions::dissociate-action - Trigger button of a dissociate action
• actions::dissociate-action.modal - Modal of a dissociate action
• actions::edit-action - Trigger button of an edit action
• actions::edit-action.grouped - Trigger button of a grouped edit action
• actions::export-action.grouped - Trigger button of a grouped export action
• actions::force-delete-action - Trigger button of a force-delete action
• actions::force-delete-action.grouped - Trigger button of a grouped force-delete action
• actions::force-delete-action.modal - Modal of a force-delete action
• actions::import-action.grouped - Trigger button of a grouped import action
• actions::modal.confirmation - Modal of an action that requires confirmation
• actions::replicate-action - Trigger button of a replicate action
• actions::replicate-action.grouped - Trigger button of a grouped replicate action
• actions::restore-action - Trigger button of a restore action
• actions::restore-action.grouped - Trigger button of a grouped restore action
• actions::restore-action.modal - Modal of a restore action
• actions::view-action - Trigger button of a view action
• actions::view-action.grouped - Trigger button of a grouped view action

#表单图标别名

• forms::components.builder.actions.clone - Trigger button of a clone action in a builder item
• forms::components.builder.actions.collapse - Trigger button of a collapse action in a builder item
• forms::components.builder.actions.delete - Trigger button of a delete action in a builder item
• forms::components.builder.actions.expand - Trigger button of an expand action in a builder item
• forms::components.builder.actions.move-down - Trigger button of a move down action in a builder item
• forms::components.builder.actions.move-up - Trigger button of a move up action in a builder item
• forms::components.builder.actions.reorder - Trigger button of a reorder action in a builder item
• forms::components.checkbox-list.search-field - Search input in a checkbox list
• forms::components.file-upload.editor.actions.drag-crop - Trigger button of a drag crop action in a file upload editor
• forms::components.file-upload.editor.actions.drag-move - Trigger button of a drag move action in a file upload editor
• forms::components.file-upload.editor.actions.flip-horizontal - Trigger button of a flip horizontal action in a file upload editor
• forms::components.file-upload.editor.actions.flip-vertical - Trigger button of a flip vertical action in a file upload editor
• forms::components.file-upload.editor.actions.move-down - Trigger button of a move down action in a file upload editor
• forms::components.file-upload.editor.actions.move-left - Trigger button of a move left action in a file upload editor
• forms::components.file-upload.editor.actions.move-right - Trigger button of a move right action in a file upload editor
• forms::components.file-upload.editor.actions.move-up - Trigger button of a move up action in a file upload editor
• forms::components.file-upload.editor.actions.rotate-left - Trigger button of a rotate left action in a file upload editor
• forms::components.file-upload.editor.actions.rotate-right - Trigger button of a rotate right action in a file upload editor
• forms::components.file-upload.editor.actions.zoom-100 - Trigger button of a zoom 100 action in a file upload editor
• forms::components.file-upload.editor.actions.zoom-in - Trigger button of a zoom in action in a file upload editor
• forms::components.file-upload.editor.actions.zoom-out - Trigger button of a zoom out action in a file upload editor
• forms::components.key-value.actions.delete - Trigger button of a delete action in a key-value field item
• forms::components.key-value.actions.reorder - Trigger button of a reorder action in a key-value field item
• forms::components.repeater.actions.clone - Trigger button of a clone action in a repeater item
• forms::components.repeater.actions.collapse - Trigger button of a collapse action in a repeater item
• forms::components.repeater.actions.delete - Trigger button of a delete action in a repeater item
• forms::components.repeater.actions.expand - Trigger button of an expand action in a repeater item
• forms::components.repeater.actions.move-down - Trigger button of a move down action in a repeater item
• forms::components.repeater.actions.move-up - Trigger button of a move up action in a repeater item
• forms::components.repeater.actions.reorder - Trigger button of a reorder action in a repeater item
• forms::components.select.actions.create-option - Trigger button of a create option action in a select field
• forms::components.select.actions.edit-option - Trigger button of an edit option action in a select field
• forms::components.text-input.actions.hide-password - Trigger button of a hide password action in a text input field
• forms::components.text-input.actions.show-password - Trigger button of a show password action in a text input field
• forms::components.toggle-buttons.boolean.false - “False” option of a boolean() toggle buttons field
• forms::components.toggle-buttons.boolean.true - “True” option of a boolean() toggle buttons field

#信息列表图标别名

• infolists::components.icon-entry.false - Falsy state of an icon entry
• infolists::components.icon-entry.true - Truthy state of an icon entry

#通知图标别名

• notifications::database.modal.empty-state - Empty state of the database notifications modal
• notifications::notification.close-button - Button to close a notification
• notifications::notification.danger - Danger notification
• notifications::notification.info - Info notification
• notifications::notification.success - Success notification
• notifications::notification.warning - Warning notification

#面板图标别名

• panels::global-search.field - Global search field
• panels::pages.dashboard.actions.filter - Trigger button of the dashboard filter action
• panels::pages.dashboard.navigation-item - Dashboard page navigation item
• panels::pages.password-reset.request-password-reset.actions.login - Trigger button of the login action on the request password reset page
• panels::pages.password-reset.request-password-reset.actions.login.rtl - Trigger button of the login action on the request password reset page (right-to-left direction)
• panels::resources.pages.edit-record.navigation-item - Resource edit record page navigation item
• panels::resources.pages.manage-related-records.navigation-item - Resource manage related records page navigation item
• panels::resources.pages.view-record.navigation-item - Resource view record page navigation item
• panels::sidebar.collapse-button - Button to collapse the sidebar
• panels::sidebar.collapse-button.rtl - Button to collapse the sidebar (right-to-left direction)
• panels::sidebar.expand-button - Button to expand the sidebar
• panels::sidebar.expand-button.rtl - Button to expand the sidebar (right-to-left direction)
• panels::sidebar.group.collapse-button - Collapse button for a sidebar group
• panels::tenant-menu.billing-button - Billing button in the tenant menu
• panels::tenant-menu.profile-button - Profile button in the tenant menu
• panels::tenant-menu.registration-button - Registration button in the tenant menu
• panels::tenant-menu.toggle-button - Button to toggle the tenant menu
• panels::theme-switcher.light-button - Button to switch to the light theme from the theme switcher
• panels::theme-switcher.dark-button - Button to switch to the dark theme from the theme switcher
• panels::theme-switcher.system-button - Button to switch to the system theme from the theme switcher
• panels::topbar.close-sidebar-button - Button to close the sidebar
• panels::topbar.open-sidebar-button - Button to open the sidebar
• panels::topbar.group.toggle-button - Toggle button for a topbar group
• panels::topbar.open-database-notifications-button - Button to open the database notifications modal
• panels::user-menu.profile-item - Profile item in the user menu
• panels::user-menu.logout-button - Button in the user menu to log out
• panels::widgets.account.logout-button - Button in the account widget to log out
• panels::widgets.filament-info.open-documentation-button - Button to open the documentation from the Filament info widget
• panels::widgets.filament-info.open-github-button - Button to open GitHub from the Filament info widget

#Schema 图标别名

• schema::components.wizard.completed-step - Completed step in a wizard

#表格图标别名

• tables::actions.disable-reordering - Trigger button of the disable reordering action
• tables::actions.enable-reordering - Trigger button of the enable reordering action
• tables::actions.filter - Trigger button of the filter action
• tables::actions.group - Trigger button of a group records action
• tables::actions.open-bulk-actions - Trigger button of an open bulk actions action
• tables::actions.column-manager - Trigger button of the column manager action
• tables::columns.collapse-button - Button to collapse a column
• tables::columns.icon-column.false - Falsy state of an icon column
• tables::columns.icon-column.true - Truthy state of an icon column
• tables::empty-state - Empty state icon
• tables::filters.query-builder.constraints.boolean - Default icon for a boolean constraint in the query builder
• tables::filters.query-builder.constraints.date - Default icon for a date constraint in the query builder
• tables::filters.query-builder.constraints.number - Default icon for a number constraint in the query builder
• tables::filters.query-builder.constraints.relationship - Default icon for a relationship constraint in the query builder
• tables::filters.query-builder.constraints.select - Default icon for a select constraint in the query builder
• tables::filters.query-builder.constraints.text - Default icon for a text constraint in the query builder
• tables::filters.remove-all-button - Button to remove all filters
• tables::grouping.collapse-button - Button to collapse a group of records
• tables::header-cell.sort-asc-button - Sort button of a column sorted in ascending order
• tables::header-cell.sort-button - Sort button of a column when it is currently not sorted
• tables::header-cell.sort-desc-button - Sort button of a column sorted in descending order
• tables::reorder.handle - Handle to grab in order to reorder a record with drag and drop
• tables::search-field - Search input

#UI 组件图标别名

• badge.delete-button - Button to delete a badge
• breadcrumbs.separator - Separator between breadcrumbs
• breadcrumbs.separator.rtl - Separator between breadcrumbs (right-to-left direction)
• modal.close-button - Button to close a modal
• pagination.first-button - Button to go to the first page
• pagination.first-button.rtl - Button to go to the first page (right-to-left direction)
• pagination.last-button - Button to go to the last page
• pagination.last-button.rtl - Button to go to the last page (right-to-left direction)
• pagination.next-button - Button to go to the next page
• pagination.next-button.rtl - Button to go to the next page (right-to-left direction)
• pagination.previous-button - Button to go to the previous page
• pagination.previous-button.rtl - Button to go to the previous page (right-to-left direction)
• section.collapse-button - Button to collapse a section

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion