Suggestion

[brandon-9]

Sorry, not a bug, but any recommended methods to help PHPStorm recognize the blade components? I'm always getting "Unknown Blade component" error for any of the icon components. Any suggestions would be much appreciated!

[owenvoke]

I'm not entirely sure, apologies! I wonder if that's something that could be added to Blade Icons in general. However, perhaps this could be done as a PhpStorm plugin / IDE helper stub.

Will see what I can find and get back to you. :+1:

[intractve]

Just as a FYI, if you want to remove errors in the meanwhile... <x-dynamic-component :component="fas-home" class="h-4 w-4" /> works beautifully

[brandon-9]

@intractve great suggestion! Thanks!

[jackwh]

After some trial and error, I finally managed to get PhpStorm (with the Laravel Idea plugin) to autocomplete icons using the steps below:

1. Ensure config/blade-icons.php is published, then update it like this:

'sets' => [
    'default' => [
        'path' => 'resources/icons/blade-fontawesome',
        'prefix' => 'fa',
        // ...
    ],
],

// ...

'components' => [
    'disabled' => false,
    'default' => 'fa',
],

2. Run these commands (with --pro as needed):

php artisan clear-compiled
php artisan view:clear
php artisan icons:clear
php artisan blade-fontawesome:sync-icons --pro
php artisan icons:cache

3. In PhpStorm's Laravel Idea settings, under the "Laravel Packages" section, configure blade-ui-kit/blade-icons as shown:

4. Click "Register Custom Blade Directives" in the Laravel Idea menu:

5. You can then get full autocompletion for components across every set, by referencing the icons like this:

<!-- x-fa-[directory].[icon] -->
<x-fa-solid.circle-arrow-down />
<x-fa-brands.github />
<x-fa-duotone.face-smile />
<!-- etc... -->

Using the x-fa-[directory].[icon] format lets PhpStorm recognise the icons and autocomplete them. The normal style (e.g. <x-fas-cloud />) still works fine too, it just won't be recognised by the IDE.

Hope that helps...!