UI Components

Icon

All icons are powered by Blade Hero Icons, which you can use immediately. Simply use the name of any Heroicon.

# Basic usage

<x-icon name="home" />
<x-icon name="trash" />
<x-icon name="archive-box-x-mark" />
<x-icon name="pencil-square" />
<x-icon name="cog-6-tooth" />
<x-icon name="bars-3" />
<x-icon name="bell-alert" />
<x-icon name="clipboard-document" />
<x-icon name="arrow-left" />
<x-icon name="arrow-right" />
<x-icon name="chat-bubble-left" />
<x-icon name="magnifying-glass" />

# Size variants

<x-icon name="bell" class="size-3" />
<x-icon name="bell" class="size-4" />
<x-icon name="bell" class="size-5" />
<x-icon name="bell" class="size-6" />
<x-icon name="bell" class="size-7" />
<x-icon name="bell" class="size-8" />
<x-icon name="bell" class="size-9" />
<x-icon name="bell" class="size-10" />

# Customize icon

<x-icon name="home" class="text-indigo-500" />
<x-icon name="pencil-square" class="text-amber-500 size-5" />
<x-icon name="trash" class="text-red-500 size-6" />
<x-icon name="clipboard-document" class="text-green-500 size-7" />

Default settings

Change icon default settings according your needs config/tallcraftui.php

return [
    /**
    *
    * type => Allowed: heroicons
    * style => Allowed: outline, solid
    *
    */
   'icons' => [
       'type' => 'heroicons',
       'style' => 'outline',
   ],
];