### Install Blade Font Awesome

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

Install the package via Composer. Optionally, publish the configuration file or raw SVG assets.

```bash
composer require owenvoke/blade-fontawesome
```

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

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

--------------------------------

### Sync Font Awesome Pro Icons

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

After installing Font Awesome Pro via npm, run this command to sync the pro icons into your project's resources.

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

--------------------------------

### Using Font Awesome Icon Components in Blade

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

Demonstrates how to render free and pro Font Awesome icons using Blade components. Free sets are bundled, while pro sets require additional setup.

```blade
<x-fab-github />          {{-- Brands --}}
<x-far-heart />           {{-- Regular --}}
<x-fas-cloud />           {{-- Solid --}}

{{-- PRO SETS (requires fontawesome-pro npm package + sync) --}}
<x-fad-circle-half />     {{-- Duotone --}}
<x-fal-star />            {{-- Light --}}
<x-fat-circle />          {{-- Thin --}}

{{-- SHARP VARIANTS (pro) --}}
{{-- Note: colon in prefix becomes a Blade-safe separator --}}
<x-fas-sharp-cloud />     {{-- Sharp Solid  (prefix: fas:sharp) --}}
<x-fal-sharp-star />      {{-- Sharp Light  (prefix: fal:sharp) --}}
<x-fat-sharp-circle />    {{-- Sharp Thin   (prefix: fat:sharp) --}}
<x-far-sharp-heart />     {{-- Sharp Regular (prefix: far:sharp) --}}
<x-fad-sharp-check />     {{-- Sharp Duotone (prefix: fad:sharp) --}}

{{-- CUSTOM KIT ICONS (pro, requires kit sync) --}}
<x-fak-my-custom-icon />  {{-- Kit icon (prefix: fak) --}}
```

--------------------------------

### Install Blade Font Awesome via Composer

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

Use this command to add the package to your Laravel project.

```shell
composer require owenvoke/blade-fontawesome
```

--------------------------------

### Sync Font Awesome Kit Icons

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

After installing a Font Awesome Kit via npm, use this command to sync the kit icons into your project's resources, replacing 'KIT_CODE' with your actual kit code.

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

--------------------------------

### Publish Blade Font Awesome Configuration

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

Run this command to publish the configuration file for customization.

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

--------------------------------

### Cache Icons for Performance

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

Run this Artisan command to cache icons, which can improve performance when using pro or kit-supplied icons.

```shell
php artisan icons:cache
```

--------------------------------

### Run Project Tests

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

Execute the test suite for the Blade Font Awesome package using Composer.

```shell
composer test
```

--------------------------------

### Blade Font Awesome Configuration File

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

The configuration file allows setting default classes, fallback icons, and HTML attributes for each icon set. Pro sets can also be disabled here.

```php
return [

    // Free: Brands set
    'brands' => [
        'prefix'     => 'fab',
        'fallback'   => '',               // icon name to use when requested icon not found
        'class'      => 'icon',           // default class applied to every icon in this set
        'attributes' => [
            'width'  => 20,
            'height' => 20,
        ],
    ],

    // Free: Regular set
    'regular' => [
        'prefix'     => 'far',
        'fallback'   => '',
        'class'      => '',
        'attributes' => [],
    ],

    // Free: Solid set
    'solid' => [
        'prefix'     => 'fas',
        'fallback'   => '',
        'class'      => '',
        'attributes' => [],
    ],

    // Pro: Duotone – set to false to disable entirely
    'duotone' => [
        'prefix'     => 'fad',
        'fallback'   => '',
        'class'      => '',
        'attributes' => [],
    ],

    // Pro: Light
    'light' => [
        'prefix' => 'fal',
        'fallback' => '',
        'class' => '',
        'attributes' => [],
    ],

    // Pro: Thin
    'thin' => [
        'prefix' => 'fat',
        'fallback' => '',
        'class' => '',
        'attributes' => [],
    ],

    // Pro: Sharp variants (set to false to disable)
    'sharp-solid'         => ['prefix' => 'fas:sharp', 'fallback' => '', 'class' => '', 'attributes' => []],
    'sharp-light'         => ['prefix' => 'fal:sharp', 'fallback' => '', 'class' => '', 'attributes' => []],
    'sharp-regular'       => ['prefix' => 'far:sharp', 'fallback' => '', 'class' => '', 'attributes' => []],
    'sharp-thin'          => ['prefix' => 'fat:sharp', 'fallback' => '', 'class' => '', 'attributes' => []],
    'sharp-duotone-solid' => ['prefix' => 'fad:sharp', 'fallback' => '', 'class' => '', 'attributes' => []],

    // Pro: Custom Kit icons
    'custom-icons' => [
        'prefix'     => 'fak',
        'fallback'   => '',
        'class'      => '',
        'attributes' => [],
    ],

    // Disable a pro set entirely:
    // 'sharp-regular' => false,
];
```

--------------------------------

### Publish Raw SVG Icons

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

Use this command to publish all SVG icons to the public vendor directory for use with the `<img>` tag.

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

--------------------------------

### Syncing Font Awesome SVGs with Artisan

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

The `sync-icons` Artisan command imports Font Awesome SVGs into your project, normalizing them for use. This is essential for pro and kit icons.

```bash
# Sync from @fortawesome/fontawesome-pro (default if both packages installed)
php artisan blade-fontawesome:sync-icons --pro

# Sync from @fortawesome/fontawesome-free
php artisan blade-fontawesome:sync-icons --free

# Sync from a Font Awesome Kit (replace KIT_CODE with your kit ID)
php artisan blade-fontawesome:sync-icons --kit=abc1234

# Specify a custom project root (useful in monorepos)
php artisan blade-fontawesome:sync-icons /path/to/project --pro

# Example output:
# Successfully updated Font Awesome SVGs
# - From: /var/www/node_modules/@fortawesome/fontawesome-pro/svgs
# - To:   /var/www/resources/icons/blade-fontawesome
#
# Sets copied: brands, duotone, light, regular, sharp-regular, sharp-solid, solid, thin
```

```bash
# Install Font Awesome Pro
npm install --save @fortawesome/fontawesome-pro

# Install a Font Awesome Kit
npm install --save '@awesome.me/kit-abc1234@latest'

# Then run the sync
php artisan blade-fontawesome:sync-icons --pro
# or
php artisan blade-fontawesome:sync-icons --kit=abc1234
```

--------------------------------

### Caching Font Awesome Icons

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

For production environments, it's recommended to cache icon sets using the Blade Icons caching mechanism to improve performance.

```bash
# Cache all registered icon sets
php artisan icons:cache
```

--------------------------------

### Clear Icon Cache

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

Use this Artisan command to clear the cached Font Awesome icons.

```bash
php artisan icons:clear
```

--------------------------------

### Compile SVGs Action

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

Internal action class to post-process SVG files. It adds `fill="currentColor"` and removes `height="1em"` for better CSS integration. This action normalizes SVGs in-place within a specified directory.

```php
use OwenVoke\BladeFontAwesome\Actions\CompileSvgsAction;

// Normalize a directory of SVGs in-place
$action = new CompileSvgsAction(
    svgDirectory:       '/path/to/source/svgs',
    svgOutputDirectory: '/path/to/output/svgs'   // can be the same directory
);

$action->execute();

// Before: <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
// After:  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
```

--------------------------------

### Reference Published SVG Assets

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

Reference the published SVG files as static assets in your HTML using the `asset()` helper.

```blade
<img src="{{ asset('vendor/blade-fontawesome/solid/cloud.svg') }}" width="24" height="24" alt="Cloud" />
<img src="{{ asset('vendor/blade-fontawesome/brands/github.svg') }}" width="24" height="24" alt="GitHub" />
<img src="{{ asset('vendor/blade-fontawesome/regular/heart.svg') }}" width="24" height="24" alt="Heart" />
```

--------------------------------

### Render Font Awesome Icons with svg() PHP Helper

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

The svg() helper function in PHP returns an Svg object. Use its toHtml() method to render the inline SVG string, optionally passing class strings or attribute arrays.

```php
use Illuminate\Support\HtmlString;

// Render icon as HTML string
$icon = svg('fas-plus')->toHtml();
// Returns: <svg fill="currentColor" ...><path .../></svg>
```

```php
// With a class string
$icon = svg('fas-plus', 'w-6 h-6 text-gray-500')->toHtml();
// Returns: <svg class="w-6 h-6 text-gray-500" fill="currentColor" ...>...</svg>
```

```php
// With an attributes array
$icon = svg('fas-plus', ['style' => 'color: #555'])->toHtml();
// Returns: <svg style="color: #555" fill="currentColor" ...>...</svg>
```

```php
// Use in a controller to pass to a view
class DashboardController extends Controller
{
    public function index(): View
    {
        return view('dashboard', [
            'addIcon' => svg('fas-plus', 'w-4 h-4'),
        ]);
    }
}
```

--------------------------------

### Apply Inline Styles to Font Awesome Icon Components

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

Use the 'style' attribute to apply inline CSS directly to the icon component.

```blade
<x-fas-cloud style="color: #555"/>
```

--------------------------------

### Use Published Raw SVG Icons

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

Reference the published SVG icons using the asset helper in your Blade views.

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

--------------------------------

### Add Classes to Font Awesome Icon Components

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

Pass Tailwind CSS classes or other CSS classes to the icon component to style it.

```blade
<x-fas-cloud class="w-6 h-6 text-gray-500"/>
```

--------------------------------

### Render Font Awesome Icons with Blade Component Tags

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

Use self-closing Blade component tags with the set prefix and icon name to render icons. Supports adding CSS utility classes, inline styles, and arbitrary HTML attributes.

```blade
{{-- Solid icon (fas prefix) --}}
<x-fas-cloud />
```

```blade
{{-- Regular icon (far prefix) --}}
<x-far-heart />
```

```blade
{{-- Brand icon (fab prefix) --}}
<x-fab-github />
```

```blade
{{-- Add Tailwind CSS utility classes --}}
<x-fas-cloud class="w-6 h-6 text-gray-500" />
```

```blade
{{-- Add inline styles --}}
<x-fas-cloud style="color: #3b82f6;" />
```

```blade
{{-- Add arbitrary HTML attributes --}}
<x-fas-plus aria-hidden="true" id="add-icon" />
```

```html
<!-- Rendered HTML output for <x-fas-plus /> -->
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <!-- Font Awesome Free 7.2.0 -->
  <path fill="currentColor" d="M256 64c0-17.7-14.3-32-32-32s-32 ..." />
</svg>
```

```html
<!-- Rendered HTML output for <x-fas-plus class="w-6 h-6 text-gray-500" /> -->
<svg class="w-6 h-6 text-gray-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path fill="currentColor" d="M256 64c0-17.7-14.3-32-32-32s-32 ..." />
</svg>
```

--------------------------------

### Disable Default Pro Icon Set

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/UPGRADE.md

To remove a default pro icon set, set its value to `false` in the configuration file. This prevents the icon set from being loaded.

```php
'sharp-regular' => false,
```

--------------------------------

### Use Font Awesome Icons as Blade Components

Source: https://github.com/owenvoke/blade-fontawesome/blob/main/README.md

Render Font Awesome icons directly in your Blade views using self-closing components. Ensure the icon name follows the 'fas-icon-name' format.

```blade
<x-fas-cloud/>
```

--------------------------------

### Render Font Awesome Icons with @svg() Blade Directive

Source: https://context7.com/owenvoke/blade-fontawesome/llms.txt

Use the @svg() directive in Blade templates for inline icon rendering. It accepts a CSS class string or an attributes array for customization.

```blade
{{-- Basic usage --}}
@svg('fas-plus')
```

```blade
{{-- With a CSS class string --}}
@svg('fas-cloud', 'w-6 h-6 text-blue-500')
```

```blade
{{-- With an attributes array --}}
@svg('fab-github', ['class' => 'w-5 h-5', 'aria-hidden' => 'true'])
```

```blade
{{-- With an inline style --}}
@svg('fas-plus', ['style' => 'color: #555'])
```

```html
<!-- All three render the same SVG structure, e.g.: -->
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path fill="currentColor" d="..." />
</svg>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.