Icon

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

  Continue to read to understand how to use local custom icons...

By following the example above and installing the owenvoke/blade-fontawesome package, Composer will also install the base for any Blade UI Kit icons, which is the blade-ui-kit/blade-icons package. This package in turn brings with it two Blade components: Icon and Svg . This way, when using the icons through the icon component you will be using the icon via Blade UI Kit, instead of using it via TallStackUI. To resolve this small conflict you can adopt one of these alternatives:

• Set a component prefix name for the TallStackUI components .
• Change the default Blade UI Kit icon component name, click here.

To use the custom icons offered through Blade UI Kit all you have to do is use the icon replacing from - to . in the icon name, because internally TallStackUI will do the reverse substitution, from . to - . This is way TallStackUI interprets what custom icons are:

<!-- Assuming you have installed: secondnetwork/blade-tabler-icons -->
<x-icon name="tabler.sun" />
<x-icon name="tabler.moon" />
<x-icon name="tabler.a-b" />
<x-icon name="tabler.users" />
<x-icon name="tabler.brand-vimeo" />
 
<!-- Assuming you have installed: owenvoke/blade-fontawesome -->
<x-icon name="far.moon" />
<x-icon name="fas.moon" />
<x-icon name="fab.facebook" />

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

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.

'icon' => [
    Components\Icon\Component::class,
    [
        // ...
 
        'custom' => [
            /*
            |----------------------------------
            | Custom icons guide.
            |----------------------------------
            |
            | These icons are used internally in the components. When using custom
            | icons via BladeUI or local SVG files, you can change the internal icons
            | to custom icons, causing this to reflect new icon looks for the internal
            | components. For local SVGs, map keys to your SVG filenames. If null,
            | uses the key as filename (e.g., 'check-circle' → check-circle.blade.php).
            */
            'guide' => [
                // ...
 
                'bars-4' => null, 
                'bars-4' => 'far.chart-bar', 
 
                // ...
            ],
        ],
    ],
],

Beyond the Blade UI Kit packages, you can use your own local SVG files as icons. Save them as anonymous Blade components and map them in the configuration file.

• Set the TALLSTACKUI_ICON_TYPE environment variable to the path (relative to resources/views ) where your icon Blade files live:
  TALLSTACKUI_ICON_TYPE="components/svg"

• Create the anonymous Blade component. The key requirement is including {{ $attributes }} on the SVG tag so TallStackUI can pass attributes through:
  <!-- /resources/views/components/svg/custom.blade.php -->
   
  <svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
    <path fill-rule="evenodd" d="M4.125 3C3.089 3 2.25 3.84 2.25 4.875V18a3 3 0 0 0 3 3h15a3 3 0 0 1-3-3V4.875C17.25 3.839 16.41 3 15.375 3H4.125ZM12 9.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5H12Zm-.75-2.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM6 12.75a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5H6Zm-.75 3.75a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75ZM6 6.75a.75.75 0 0 0-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75v-3A.75.75 0 0 0 9 6.75H6Z" clip-rule="evenodd"/>
    <path d="M18.75 6.75h1.875c.621 0 1.125.504 1.125 1.125V18a1.5 1.5 0 0 1-3 0V6.75Z"/>
  </svg>

• Use the icon normally, or map the icon in the configuration file's custom.guide section. The key is the internal icon name and the value is the filename of your Blade component:
  'icon' => [
      Components\Icon\Component::class,
      [
          // ...
   
          'custom' => [
              'guide' => [
   
                  // ...
   
                  'x-mark' => null, 
                  'x-mark' => 'custom', 
              ],
          ],
      ],
  ],