Icon

Several Wirestrap components expose an icon prop: accordion panels, table columns, and form inputs among others. Icons are rendered via an internal <i> element by default. No library is bundled: install whichever you prefer and pass its class names directly.

Using the icon prop

Pass a string to use it as a CSS class on the <i> element. Pass an array to set arbitrary attributes. The base class from wirestrap.icon.class (default: bi) is always merged in, so passing icon="bi-truck" renders <i class="bi bi-truck">.

If your icon library uses a family class (e.g. fa-solid for Font Awesome), set it as the base class in config and the default <i> renderer is all you need:

// config/wirestrap.php
'icon' => [
    'class' => 'fa-solid',  // merged on every icon element
],

{{-- String: used as a CSS class on the <i> element --}}
<x-wirestrap::accordion id="faq">
    <x-slot:shipping label="Shipping" icon="bi-truck">
        ...
    </x-slot:shipping>
</x-wirestrap::accordion>

{{-- Array: spread as attributes on the <i> element --}}
<x-wirestrap::accordion id="faq">
    <x-slot:shipping
        label="Shipping"
        :icon="['class' => 'bi-truck', 'aria-hidden' => 'true']"
    >
        ...
    </x-slot:shipping>
</x-wirestrap::accordion>

The same syntax works on any component that accepts an icon prop:

<x-wirestrap::table :columns="[
    ['label' => 'Name', 'icon' => 'bi-person', 'icon-placement' => 'start'],
    ['label' => 'Status', 'icon' => 'bi-circle-fill'],
]">
    ...
</x-wirestrap::table>

Custom component

Set wirestrap.icon.component_path to the path of your own Blade component. Wirestrap will use it instead of the built-in <i> renderer.

// config/wirestrap.php
'icon' => [
    'component_path' => 'icon',  // resolves to resources/views/components/icon.blade.php
    'class' => '',               // base class, leave empty if your component handles it
],

Your component receives $icon exactly as passed: a string or an array. Handle both cases to match the default behavior, then render however you like.

{{-- resources/views/components/icon.blade.php --}}
@props(['icon' => ''])

{{-- $icon is a string (class name) or an array of attributes --}}
<i {{ $attributes->merge(is_array($icon) ? $icon : ['class' => $icon]) }}></i>