TallStackUI, Icon

# Concept

Before version 1.20, TallStackUI only supported one icon library, Heroicons. Heroicons is a beautiful library, but there is a problem: the low number of icons, there are only around 300 icons. Due to many requests, starting from version 1.20, TallStackUI now supports three icon libraries, offering more than 10K icons. A small change needs to be made so that you can use the new supported icon libraries, this change must be made in the configuration file.

This is the old icon configuration in the configuration file before v1.20:

/*
|--------------------------------------------------------------------------
| Icon Style
|--------------------------------------------------------------------------
|
| Control the default icon style (Allowed: solid, outline)
*/
'icon' => 'solid',

This is the new icon configuration for the configuration file after v1.20:

/*
|--------------------------------------------------------------------------
| Icon Style
|--------------------------------------------------------------------------
|
| MAKE SURE TO READ THE DOCS BEFORE CHANGE THIS CONFIGURATION HERE.
*/
'icons' => [
    /*
    |----------------------------------
    | Default and in-use icon type.
    |----------------------------------
    | Allowed: heroicons, phosphoricons, google, tablericons.
    */
    'type' => env('TALLSTACKUI_ICON_TYPE', 'heroicons'),
 
    /*
    |----------------------------------
    | Default and in-use icon style.
    |----------------------------------
    | Allowed:
    |
    | Heroicons: solid, outline
    | Phosphoricons: thin, light, regular, bold, duotone
    | Google: default
    | Tablericons: default
    */
    'style' => env('TALLSTACKUI_ICON_STYLE', 'solid'),
 
    /*
    |----------------------------------
    | Flush unused icons pack.
    |----------------------------------
    |
    | To avoid the accumulation of unused files, the icon packs that are
    | not in use can be deleted automatically when new icons are set.
    */
    'flush' => true,
],

If you have been using TallStackUI since before version 1.20, you must update your configuration file to adapt it to the new icon configuration, otherwise, you will not be able to use the new icon libraries and also can get some exceptions.

# Supported Icon Libraries

This is the current list of supported icon libraries:

# Setup Icons

If you want to change the icon library to one of the supported ones follow these steps.

1) Edit the configuration file according you want:

/*
|--------------------------------------------------------------------------
| Icon Style
|--------------------------------------------------------------------------
|
| MAKE SURE TO READ THE DOCS BEFORE CHANGE THIS CONFIGURATION HERE.
*/
'icons' => [
    /*
    |----------------------------------
    | Default and in-use icon type.
    |----------------------------------
    | Allowed: heroicons, phosphoricons, google, tablericons. 
    */
    'type' => env('TALLSTACKUI_ICON_TYPE', 'heroicons'), 
    'type' => env('TALLSTACKUI_ICON_TYPE', 'phosphoricons'), 
 
    /*
    |----------------------------------
    | Default and in-use icon style.
    |----------------------------------
    | Allowed:
    |
    | Heroicons: solid, outline
    | Phosphoricons: thin, light, regular, bold, duotone 
    | Google: default
    | Tablericons: default
    */
    'style' => env('TALLSTACKUI_ICON_STYLE', 'solid'), 
    'style' => env('TALLSTACKUI_ICON_STYLE', 'regular'), 
 
    // ...
],

2) Save the file and run the following command in your terminal:

php artisan tallstackui:setup-icon

This command is responsible for downloading and set up the new icon library within your project. Due to the way the icons are downloaded and stored, when deploying your project to production you will have to run the same command in the production environment. To avoid this manual work, you can add this instruction to a Composer hook:

"scripts": {
    "post-autoload-dump": [
        "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
        "@php artisan package:discover --ansi",
        "@php artisan tallstackui:setup-icon --force --ansi" 
    ],
}

Using this approach, every time you run the composer install or composer update commands, the icon library will be downloaded and prepared automatically, avoiding need to run the command manually.

# Basic Usage

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

# Variations

The variations will be available depending on the type of icon library. For example, for Heroicons you can use outline , as it is an available style, but this same style will not be applied to Phosphoricons. As for Google icons, the variations are linked to the icon name.

<!-- HeroIcons -->
<x-icon name="users" outline />
 
<!-- PhosphorIcons -->
<x-icon name="users" thin />
<x-icon name="users" light />
<x-icon name="users" regular />
<x-icon name="users" bold />
<x-icon name="users" duotone />
 
<!-- Google -->
<!-- Normal, tt: duotone, s: sharp, r: rounded -->
<x-icon name="group" />
<x-icon name="group-tt" />
<x-icon name="group-s" />
<x-icon name="group-r" />
 
<!-- TablerIcons, only support outline -->
<x-icon name="users" />

# 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>