Blade Font Awesome

Upgrading to version 2.x includes the following changes:

• Font Awesome Version: Updates to Font Awesome 6.x. If you use Font Awesome Pro icons, you must update them.
• New Icon Sets: Includes the Thin (fat) icon set and supports Sharp (fash) out of the box.
• Environment Requirements: Requires Laravel 9 or higher and PHP 8.0 or higher.

To customize default classes, default attributes, or manage icon sets, publish the configuration file to config/blade-fontawesome.php using the following command:

php artisan vendor:publish --tag=blade-fontawesome-config

To use Font Awesome Kits, install your specific kit via npm:

npm install --save '@awesome.me/kit-KIT_CODE@latest'

Then, run the sync command using your kit code to populate the resources/icons/blade-fontawesome directory:

php artisan blade-fontawesome:sync-icons --kit=KIT_CODE

Using pro or kit-supplied icons can cause a small performance hit due to the large number of icons. You can mitigate this by caching the icons using the following command:

php artisan icons:cache

Install the package via Composer to use Font Awesome icons as Blade components in your Laravel application.

composer require owenvoke/blade-fontawesome

To use Font Awesome Pro icons, first install the pro package via npm:

npm i --save @fortawesome/fontawesome-pro

Then, run the sync command to add the icons to your resources path. The package will automatically detect them in resources/icons/blade-fontawesome.

php artisan blade-fontawesome:sync-icons --pro

If you need to use the icons as standard image assets (e.g., in <img> tags) rather than Blade components, publish the SVG files to your vendor directory:

php artisan vendor:publish --tag=blade-fontawesome --force

Then use them in your views:

<img src="{{ asset('vendor/blade-fontawesome/solid/cloud.svg') }}" width="10" height="10"/>

Upgrading to version 3.x introduces several breaking changes regarding configuration, icon sets, and environment requirements:

• Font Awesome Version: Updates to Font Awesome 7.x. If you use Font Awesome Pro icons, you must update them.
• Custom Kit Icons Configuration: The configuration key for custom icons has changed from custom to custom-icons. Note that icon usage remains unchanged and still uses the fak prefix.
• Icon Loading: The package now loads all icon sets defined in config/blade-fontawesome.php. To prevent a default pro icon set from loading, set its value to false.
• Environment Requirements: Requires Laravel 12 or higher and PHP 8.4 or higher.

// Update custom icon config key
'custom-icons' => [
    // ...
],

// Disable a specific pro icon set
'sharp-regular' => false,

To prevent certain pro icon sets from being loaded, set their value to false in the config/blade-fontawesome.php configuration file.

'sharp-regular' => false,

Icons are available as self-closing Blade components. They compile directly to SVG. You can pass standard HTML attributes like class or style to the component.

{{-- Basic usage --}}
<x-fas-cloud/>

{{-- With classes --}}
<x-fas-cloud class="w-6 h-6 text-gray-500"/>

{{-- With inline styles --}}
<x-fas-cloud style="color: #555"/>

By default, icon sets are accessed using specific prefixes. These can be reconfigured in config/blade-fontawesome.php.

Free Icon Sets:
- Brands (fab)
- Regular (far)
- Solid (fas)

Pro Icon Sets:
- Duotone (fad)
- Light (fal)
- Thin (fat)
- Sharp Regular (far:sharp)
- Sharp Light (fal:sharp)
- Sharp Solid (fas:sharp)
- Sharp Thin (fat:sharp)
- Sharp Duotone (fad:sharp)
- Custom Kit Icons (fak)

The following options and arguments are available for the blade-fontawesome:sync-icons command:

Arguments:
  directory : The root directory containing the node_modules directory (defaults to base_path())

Options:
  --free   : Use the fontawesome-free npm package
  --pro    : Use the fontawesome-pro npm package
  --kit=    : The Font Awesome kit id to use (these can be free or pro)