Components
icon

Icon

Reusable icon component using Iconify for consistent iconography across the UI.

Demo

<div class="flex flex-wrap items-center gap-2">
    <x-ui.icon name="ph--house"  />
    <x-ui.icon name="ph--user" />
    <x-ui.icon name="ph--gear" />
    <x-ui.icon name="ph--bell" />
</div>

Installation

Shell

php artisan flexi:add icon

Usage

The Icon component provides a simple wrapper around Iconify icons. Use the name prop to specify the icon class, size for predefined sizes, and intent for semantic colors.

Examples

Sizes

<div class="flex flex-wrap items-center gap-2">
    <x-ui.icon name="ph--star" size="xs" />
    <x-ui.icon name="ph--star" size="sm" />
    <x-ui.icon name="ph--star" />
    <x-ui.icon name="ph--star" size="lg" />
    <x-ui.icon name="ph--star" size="xl" />
    <x-ui.icon name="ph--star" size="2xl" />
</div>

Intents

<div class="flex flex-wrap items-center gap-2">
    <x-ui.icon name="ph--house"  />
    <x-ui.icon name="ph--user" intent="primary" />
    <x-ui.icon name="ph--check-circle" intent="success" />
    <x-ui.icon name="ph--warning" intent="warning" />
    <x-ui.icon name="ph--x-circle" intent="danger" />
    <x-ui.icon name="ph--info" intent="secondary" />
    <x-ui.icon name="ph--question" intent="muted" />
</div>

API

Prop	Description
`name` (string)	The Iconify icon class name (e.g., ph--house, ph--user).
`size` (xs\|sm\|md\|lg\|xl\|2xl)	Predefined size for the icon.
`intent` (fg\|muted\|primary\|secondary\|success\|warning\|danger)	Semantic color intent for the icon.
`class` (string)	Additional CSS classes for custom styling.

Edit this page

Text

Semantic text compon...