Sheaf UI

#Introduction

The Icon component is designed to be headless, customizable, and easy to use. It supports two icon providers under the hood:

• Heroicons
• Phosphor Icons

We leverage WireUI's wrappers for both providers to deliver a simple and expressive interface.

Note: You must install the relevant WireUI wrapper packages based on the icon provider you intend to use.

#Installation

this is already happens if you run the sheaf:init commad

composer require wireui/heroicons

for using phosphor icon you need to install the wuireui's wrapper package

composer require wireui/phosphoricons

Once installed, you can start using the <x-ui.icon /> component seamlessly in your views.

#Component Installation

Use the sheaf artisan command to install the icon component easily:

php artisan sheaf:install icon

#Customization

#Variants

Each variant offers different sizes and styles:

#Hero icons

    <!-- 24px, outline -->
    <x-ui.icon name="academic-cap"  class="text-white"/> 
    <!-- 24px, solid -->
    <x-ui.icon name="academic-cap" variant="solid" class="text-white"/> 
    <!-- 20px, solid -->
    <x-ui.icon name="academic-cap" variant="mini" class="text-white"/> 
     <!-- 16px, solid -->
    <x-ui.icon name="academic-cap" variant="micro" class="text-white"/>

#Phosphor icons

To use Phosphor icons, prefix the name with ps: or phosphor:.

    <!-- thin variant -->
    <x-ui.icon name="ps:align-top" variant="thin" class="text-white"/>
    <!-- light variant -->
    <x-ui.icon name="ps:align-top" variant="light" class="text-white"/>
    <!-- regular variant (default) -->
    <x-ui.icon name="ps:align-top"  class="text-white"/> 
    <!-- duotone variant  -->
    <x-ui.icon name="ps:align-top" variant="duotone" class="text-white"/>
    <!-- bold variant  -->
    <x-ui.icon name="ps:align-top" variant="bold" class="text-white"/>
    <!-- fill variant  -->
    <x-ui.icon name="ps:align-top" variant="fill" class="text-white"/>

#Sizes

<x-demo class="flex gap-2 justify-center items-center">
    <x-ui.icon name="academic-cap"  class="size-12"/> 
    <x-ui.icon name="academic-cap" variant="solid" class="size-12"/>
</x-demo>

Use Tailwind size utilities or size-* utilities (required for Phosphor icons).

If you're using Phosphor icons and no size is defined, the component applies a default size-6.

While you’re free to override the icon size, we recommend sticking with the provided variant sizes they’re crafted for optimal balance and clarity.

#Custom styles

<x-demo class="flex gap-2 justify-center items-center">
    <x-ui.icon name="academic-cap"  class="size-12"/> 
    <x-ui.icon name="academic-cap" variant="solid" class="size-12"/>
    <x-ui.icon name="cpu-chip" variant="solid" class="fill-red-600 size-12"/>
</x-demo>

#Component Props