TallStackUI, Icon

# Concept

In the beginning, TallStackUI only supported Heroicons. Although they are good icons, they have one main problem: there are few, less than 350. As a result, TallStackUI was adopted - still in version 1.x, to support other libraries, and it worked. However, this created a problem: maintaining more repositories and updating the icons periodically. From version 2.x onwards we dropped support for custom icons maintained by TallStackUI in favor of using custom icons through the community repositories of the Blade UI Kit project, which supports more than 100K icons in total, divided between repositories.

# Basic Usage

<x-icon name="users" class="h-5 w-5"/>
<x-icon name="clipboard" class="h-5 w-5"/>

# Left & Right Slots

Users Settings

<x-icon name="users" class="h-5 w-5">
    <x-slot:left>
        Users
    </x-slot:left>
</x-icon>
<x-icon name="cog" class="h-5 w-5">
    <x-slot:right>
        Settings
    </x-slot:right>
</x-icon>

# Custom Icons

By default, TallStackUI natively supports heroicons . This way, you can use any heroicons without having to install any dependencies. However, if you want to use a different icon kit - through the Blade UI Kit, you can follow these steps:

Install the icon package you want to use, for example:
```
composer require owenvoke/blade-fontawesome
```

Set the icon library in the environment variable:

TALLSTACKUI_ICON_TYPE="owenvoke/blade-fontawesome"

Perform a general cleanup in Laravel:
```
php artisan optimize:clear
```

After that, you can use any icon from the chosen pack:

<x-icon name="fas-cloud" class="w-6 h-6 text-gray-500"/>
 
<!-- This way would also work: -->
<x-fas-cloud class="w-6 h-6 text-gray-500"/>

# Variations

Icon variations are applied depending on the format you use the icons in. For example, for heroicons the only variation available is outline, while for FontAwesome - via the owenvoke/blade-fontawesome package there will be other variations:

<!-- Default, Heroicons: outline -->
<x-icon name="users" outline />
 
<!-- FontAwesome, via owenvoke/blade-fontawesome -->
<x-icon name="far-user" /> <!-- far -->
<x-icon name="fas-user" /> <!-- fas -->

# Internal Icon Guide

Since internally several icons are used in many components, you are free to customize these internal icons through an icon guide in the TallStackUI configuration file. All you have to do is define the name of the icons to be used. This way, the custom icon will be used instead of the Heroicon.

Inside the icons configuration - in the config/tallstackui.php file, you will find the icons key and inside it the custom key. All you have to do is define the name of the icon to be used, to replace the internal icon. You can refer to the list of available icons from Heroicons for visual reference.

// ...
 
'custom' => [
    /*
    |----------------------------------
    | Custom icons guide.
    |----------------------------------
    |
    | These icons are used internally in the components. When using custom
    | icons via BladeUi you can optionally change the internal icons to custom
    | icons, causing this to reflect new icon looks for the internal components.
    */
    'guide' => [
        // ...
 
        'arrow-trending-down' => null,
        'arrow-up-tray' => null,
        'bars-4' => null, 
        'bars-4' => 'far-chart-bar', 
 
        // ...
    ],
],
 
// ...