Logo Beartropy

Icons

The icon component is a universal, flexible, and fast way to use SVG or font-based icons in your project. It supports multiple icon sets (Heroicons, Lucide, FontAwesome), style variants (outline/solid), different sizes, and full class customization.
By default, the icon set and variant are defined in your config, but you can always override them per icon.

Important!

- To use FontAwesome, you must include it in your app (via CDN or NPM).
- If using heroicons or lucide, is strongly recommended to cache the icons for better performance.
By default, the heroicons set is installed and configured as default in the package.' />

Component name

As you will see in the examples, the component name is bt-icon.
We use the blade-heroicons package that is part of the Blade UI Kit, and they already have the icon component. So we set our component as bt-icon to avoid conflicts.

Integrations

In any component you see that accepts an icon parameter like Button, Alert, etc., you can use what you would use in the icon component.
For example, you are setting up your Nav component, and you want to use an icon, you can do it like this:

Basic usage

Use the icon component with just the icon name, and it will use your default set and variant:
blade 
            
1<x-bt-icon md name="user" class="text-black dark:text-white" />
2<x-bt-icon md name="check-circle" class="text-black dark:text-white" />
3<x-bt-icon md name="user" class="text-black dark:text-white" />

Icon sizes

You can set the icon size using the magic attributes xs, sm, md, lg, or xl.
If you want a custom size, just use the class prop to set any width/height you want!
blade 
            
1<x-bt-icon name="user" xs class="text-black dark:text-white" />
2<x-bt-icon name="user" sm class="text-black dark:text-white" />
3<x-bt-icon name="user" md class="text-black dark:text-white" />
4<x-bt-icon name="user" lg class="text-black dark:text-white" />
5<x-bt-icon name="user" xl class="text-black dark:text-white" />
6<x-bt-icon name="user" class="w-16 h-16 text-red-500" />

Variants: outline & solid (Heroicons)

For Heroicons, you can use the outline or solid magic attributes to select the style.
The default variant is set in your config, but you can override per icon.
Lucide and FontAwesome currently only have one style each.
blade 
            
1<x-bt-icon name="user" outline lg class="text-blue-500" />
2<x-bt-icon name="user" solid lg class="text-emerald-500" />

Switching icon sets

By default, the icon set comes from your config (heroicons, lucide, or fontawesome).
You can override the set for a single icon with the set prop.
blade 
            
1<x-bt-icon name="user" set="lucide" lg class="text-black" />
2<x-bt-icon name="user" set="heroicons" solid lg class="text-purple-500" />
3<x-bt-icon name="fa fa-solid fa-user" set="fontawesome" lg class="text-green-600" />

Configuration

Publishing the config

The icon component uses a config file (config/beartropy/ui.php) where you can set the default icon set and default variant for your entire project.
shell 
            
1php artisan vendor:publish --provider="Beartropy\Ui\BeartropyUIServiceProvider" --tag="beartropy-ui-config"

Config example

This will create a file at config/beartropy/ui.php where you can set:
php 
            
1return [
2    // ...
3    'icon_set' => env('BEARTROPY_UI_ICON_SET', 'heroicons'), // heroicons | lucide | fontawesome
4    'icon_variant' => env('BEARTROPY_UI_ICON_VARIANT', 'outline'), // outline | solid (only for Heroicons)
5];

Lucide as default

Example: If you want all icons to use Lucide by default:
php 
            
1'icon_set' => 'lucide',

Heroicons solid as default

Example: If you want all Heroicons to be solid by default:
php 
            
1'icon_set' => 'heroicons',
2'icon_variant' => 'solid',
Code highlighting provided by Torchlight