公告: Filament 4.x 已正式发布。中文文档翻译正在进行中...
DOCS
DOCS

Languages

Version

Theme

核心概念

图标

概述

图标用在整个 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 图标的名称。此外，你可以使用 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'),
]);

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

如果你创建了一个 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::global-search.field - 全局搜索字段
  • panels::pages.dashboard.actions.filter - 仪表盘过滤 Action 的触发按钮
  • panels::pages.dashboard.navigation-item - 仪表盘导航项
  • panels::pages.password-reset.request-password-reset.actions.login - 请求密码重置页面的登录 Action 触发按钮
  • panels::pages.password-reset.request-password-reset.actions.login.rtl - 请求密码重置页面的登录 Action 触发按钮 (right-to-left direction)
  • panels::resources.pages.edit-record.navigation-item - 资源编辑记录页面导航项
  • panels::resources.pages.manage-related-records.navigation-item - 资源管理关联记录页面导航项
  • panels::resources.pages.view-record.navigation-item - 资源查看记录页面导航项
  • panels::sidebar.collapse-button - 折叠侧边栏的按钮
  • panels::sidebar.collapse-button.rtl - 折叠侧边栏的按钮 (right-to-left direction)
  • panels::sidebar.expand-button - 展开侧边栏的按钮
  • panels::sidebar.expand-button.rtl - 展开侧边栏的按钮 (right-to-left direction)
  • panels::sidebar.group.collapse-button - 侧边栏分组的折叠按钮
  • panels::tenant-menu.billing-button - 租户菜单的账单按钮
  • panels::tenant-menu.profile-button - 租户菜单页面的 Profile 按钮
  • panels::tenant-menu.registration-button - 租户菜单的注册按钮
  • panels::tenant-menu.toggle-button - 切换租户菜单的按钮
  • panels::theme-switcher.light-button - 主题切换器中切换到 light 主题的按钮
  • panels::theme-switcher.dark-button - 主题切换器中切换到 dark 主题的按钮
  • panels::theme-switcher.system-button - 主题切换器中切换系统主题的按钮
  • panels::topbar.close-sidebar-button - 关闭侧边栏的按钮
  • panels::topbar.open-sidebar-button - 打开侧边栏的按钮
  • panels::topbar.group.toggle-button - 顶部菜单分组切换按钮
  • panels::topbar.open-database-notifications-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.builder.actions.clone - Builder 项目的克隆触发按钮
  • forms::components.builder.actions.collapse - Builder 项目的折叠触发按钮
  • forms::components.builder.actions.delete - Builder 项目的删除触发按钮
  • forms::components.builder.actions.expand - Builder 项目的展开触发按钮
  • forms::components.builder.actions.move-down - Builder 项目的向下移动触发按钮
  • forms::components.builder.actions.move-up - Builder 项目的向上移动触发按钮
  • forms::components.builder.actions.reorder - Builder 项目的重新排序触发按钮
  • forms::components.checkbox-list.search-field - 复选框列表中的搜索输入框
  • forms::components.file-upload.editor.actions.drag-crop - 文件上传编辑器的拖动裁切触发按钮
  • forms::components.file-upload.editor.actions.drag-move - 文件上传编辑器的拖拽移动触发按钮
  • forms::components.file-upload.editor.actions.flip-horizontal - 文件上传编辑器的水平翻转触发按钮
  • forms::components.file-upload.editor.actions.flip-vertical - 文件上传编辑器的垂直翻转触发按钮
  • forms::components.file-upload.editor.actions.move-down - 文件上传编辑器的向下移动触发按钮
  • forms::components.file-upload.editor.actions.move-left - 文件上传编辑器的向左移动触发按钮
  • forms::components.file-upload.editor.actions.move-right - 文件上传编辑器的向右移动触发按钮
  • forms::components.file-upload.editor.actions.move-up - 文件上传编辑器的向上移动触发按钮
  • forms::components.file-upload.editor.actions.rotate-left - 文件上传编辑器的向左旋转触发按钮
  • forms::components.file-upload.editor.actions.rotate-right - 文件上传编辑器的向右旋转触发按钮
  • forms::components.file-upload.editor.actions.zoom-100 - 文件上传编辑器的 zoom 100 触发按钮
  • forms::components.file-upload.editor.actions.zoom-in - 文件上传编辑器的放大触发按钮
  • forms::components.file-upload.editor.actions.zoom-out - 文件上传编辑器的缩小旋转触发按钮
  • forms::components.key-value.actions.delete - Key-value 字段项目的删除触发按钮
  • forms::components.key-value.actions.reorder - Key-value 字段项目的重新排序触发按钮
  • forms::components.repeater.actions.clone - Repeater 项目的克隆触发按钮
  • forms::components.repeater.actions.collapse - Repeater 项目的折叠触发按钮
  • forms::components.repeater.actions.delete - Repeater 项目的删除触发按钮
  • forms::components.repeater.actions.expand - Repeater 项目的展开触发按钮
  • forms::components.repeater.actions.move-down - Repeater 项目的向下移动触发按钮
  • forms::components.repeater.actions.move-up - Repeater 项目的向上移动触发按钮
  • forms::components.repeater.actions.reorder - Repeater 项目的重新排序触发按钮
  • forms::components.select.actions.create-option - Select 字段的新建选项触发按钮
  • forms::components.select.actions.edit-option - Select 字段的编辑选项触发按钮
  • forms::components.text-input.actions.hide-password - 在文本输入字段中隐藏密码 Action 的触发按钮
  • forms::components.text-input.actions.show-password - 在文本输入字段中显示密码 Action 的触发按钮
  • forms::components.toggle-buttons.boolean.false - boolean() 切换按钮组的 "False" 选项
  • forms::components.toggle-buttons.boolean.true - boolean() 切换按钮组的 "True" 选项
  • forms::components.wizard.completed-step - 向导卡中的完成步骤

表格构造器中的图标别名

  • tables::actions.disable-reordering - 重新排序禁用触发按钮
  • tables::actions.enable-reordering - 重新排序启用触发按钮
  • tables::actions.filter - 过滤器操作的触发按钮
  • tables::actions.group - 分组记录 action 的触发按钮
  • tables::actions.open-bulk-actions - 打开批量操作的触发按钮
  • tables::actions.toggle-columns - 切换列操作的触发按钮
  • tables::columns.collapse-button - 折叠列的按钮
  • tables::columns.icon-column.false - 图标列的 False 状态
  • tables::columns.icon-column.true - 图标列的真值状态
  • tables::empty-state - 空状态图标
  • tables::filters.query-builder.constraints.boolean - 查询构造器中布尔值约束的默认图标
  • tables::filters.query-builder.constraints.date - 查询构造器中日期约束的默认图标
  • tables::filters.query-builder.constraints.number - 查询构造器中数字约束的默认图标
  • tables::filters.query-builder.constraints.relationship - 查询构造器中关联约束的默认图标
  • tables::filters.query-builder.constraints.select - 查询构造器中下拉选择约束的默认图标
  • tables::filters.query-builder.constraints.text - 查询构造器中文本约束的默认图标
  • tables::filters.remove-all-button - 删除所有过滤器的按钮
  • tables::grouping.collapse-button - 用于折叠一组记录的按钮
  • tables::header-cell.sort-asc-button - 以升序排列的排序按钮
  • tables::header-cell.sort-button' - 当某个字段当前未排序时的排序排序按钮
  • tables::header-cell.sort-desc-button - 以降序排列的排序按钮
  • tables::reorder.handle - 使用拖拽、拖放对记录重新排序的抓手
  • tables::search-field - 搜索输入框

通知生成器中的图标别名

  • notifications::database.modal.empty-state - 数据库通知模态框的空状态
  • notifications::notification.close-button - 关闭通知的按钮
  • notifications::notification.danger - 危险通知
  • notifications::notification.info - 信息通知
  • notifications::notification.success - 成功通知
  • notifications::notification.warning - 警告通知

Action 图标别名

  • actions::action-group - Action 分组的触发按钮
  • actions::create-action.grouped - 分组新建 Action 的触发按钮
  • actions::delete-action - 删除 Action 的触发按钮
  • actions::delete-action.grouped - 分组删除 Action 的触发按钮
  • actions::delete-action.modal - 删除 Action 的模态框
  • actions::detach-action - Detach Action 的触发按钮
  • actions::detach-action.modal - Detach Action 模态框
  • actions::dissociate-action - Dissociate Action 模态框
  • actions::dissociate-action.modal - Dissociate Action 模态框
  • actions::edit-action - 编辑 Action 的触发按钮
  • actions::edit-action.grouped - 分组编辑 Action 的触发按钮
  • actions::force-delete-action - 强制删除 Action 的触发按钮
  • actions::export-action.grouped - 分组导出 Action 的触发按钮
  • actions::force-delete-action.grouped - 分组强制删除 Action 的触发按钮
  • actions::force-delete-action.modal - 强制删除 Action 的模态框
  • actions::import-action.grouped - 分组导入 Action 的触发按钮
  • actions::modal.confirmation - 需要确认的 Action 的模态框
  • actions::replicate-action - 复制 Action 的触发按钮
  • actions::replicate-action.grouped - 分组复制 Action 的触发按钮
  • actions::restore-action - 恢复 Action 的触发按钮
  • actions::restore-action.grouped - 分组恢复 Action 的触发按钮
  • actions::restore-action.modal - 恢复 Action 的模态框
  • actions::view-action - 查看 Action 的触发按钮
  • actions::view-action.grouped - 分组查看 Action 的触发按钮

信息列表图标别名

  • infolists::components.icon-entry.false - Icon Entry 的 false 状态
  • infolists::components.icon-entry.true - Icon Entry 的真值状态

UI 组件中的图标别名

  • badge.delete-button - 删除徽章的按钮
  • breadcrumbs.separator - 面包屑之间的分隔符
  • breadcrumbs.separator.rtl - 面包屑之间的分隔符(right-to-left direction)
  • modal.close-button - 关闭模态框的按钮
  • pagination.first-button - 第一页按钮
  • pagination.first-button.rtl - 第一页按钮(right-to-left direction)
  • pagination.last-button - 最后一页按钮
  • pagination.last-button.rtl - 最后一页按钮(right-to-left direction)
  • pagination.next-button - 下一页按钮
  • pagination.next-button.rtl - 下一页按钮(right-to-left direction)
  • pagination.previous-button - 上一页按钮
  • pagination.previous-button.rtl - 上一页按钮(right-to-left direction)
  • section.collapse-button - 折叠区域的按钮
Edit on GitHub

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

上一页
静态资源
下一页
颜色