Flux 使用优秀的 Heroicons 项目作为其图标集合。Heroicons 是由 Tailwind Labs 的优秀团队精心制作的一套美观且功能齐全的图标。
<flux:icon.bolt />每个图标有四种变体：outline（默认）、solid、mini 和 micro。
<flux:icon.bolt /> <!-- 24px, outline --><flux:icon.bolt variant="solid" /> <!-- 24px, filled --><flux:icon.bolt variant="mini" /> <!-- 20px, filled --><flux:icon.bolt variant="micro" /> <!-- 16px, filled -->使用 size-* Tailwind 工具类来控制图标的尺寸（高度/宽度）。
<flux:icon.bolt class="size-12" /><flux:icon.bolt class="size-10" /><flux:icon.bolt class="size-8" />您可以使用 Tailwind 的 文本颜色工具类 来自定义图标的颜色。
<flux:icon.bolt variant="solid" class="text-amber-500 dark:text-amber-300" />我们喜爱 Heroicons，但我们承认它是一个相对有限的图标集。如果您需要更多图标，我们建议使用 Lucide。
为了让使用 Lucide 图标变得简单，Flux 提供了一个方便的 artisan 命令来将它们导入到您的项目中：
php artisan flux:icon此命令将提示您选择要导入的图标。您也可以通过将图标名称作为参数传递给命令来手动指定要导入的图标：
php artisan flux:icon crown grip-vertical github<flux:icon.crown /><flux:icon.grip-vertical /><flux:icon.github />为了对图标进行完全控制，您可以在项目的 resources/views/flux/icon 目录中创建自己的 Blade 文件。
- resources - views - flux - icon - wink.blade.php您可以直接将 SVG 代码粘贴到 Blade 文件中，但我们建议使用以下模板结构来确保与其他组件的兼容性：
@php $attributes = $unescapedForwardedAttributes ?? $attributes; @endphp@props([ 'variant' => 'outline',])@php$classes = Flux::classes('shrink-0') ->add(match($variant) { 'outline' => '[:where(&)]:size-6', 'solid' => '[:where(&)]:size-6', 'mini' => '[:where(&)]:size-5', 'micro' => '[:where(&)]:size-4', });@endphp{{-- Your SVG code here: --}}<svg {{ $attributes->class($classes) }} data-flux-icon aria-hidden="true" ... > ...</svg><flux:icon.wink />所有图标组件（例如 flux:icon.bolt、flux:icon.loading）都共享相同的属性和行为。
|
属性
|
描述
|
|---|---|
| variant |
图标的视觉样式。选项：outline（默认）、solid、mini、micro。
|
|
类名
|
描述
|
|---|---|
| size-* |
使用 Tailwind 的尺寸工具类来控制图标的尺寸（例如 size-8、size-12）。
|
| text-* |
使用 Tailwind 的文本颜色工具类来控制图标的颜色（例如 text-blue-500）。
|
|
属性
|
描述
|
|---|---|
| data-flux-icon |
应用于根 SVG 元素，用于样式和识别。
|