### Complete Configuration Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

A comprehensive example of the Blade Heroicons configuration file, demonstrating all available options including prefix, fallback icon, default classes, and attributes.

```yaml
return [
    'prefix' => 'heroicon',
    'fallback' => 'question-mark-circle',
    'class' => 'w-4 h-4 text-gray-500',
    'attributes' => [
        'wire:loading.delay' => 'opacity-50',
    ],
];
```

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

### Minimal Configuration Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

An example of a minimal configuration file for Blade Heroicons. This typically includes essential settings like the component prefix and default classes.

```yaml
return [
    'prefix' => 'heroicon',
    'class' => 'w-4 h-4',
];
```

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

### Complete Custom Configuration Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

This example demonstrates a fully customized configuration, specifying values for prefix, fallback icon, default CSS class, and custom HTML attributes.

```php
<?php

return [
    'prefix' => 'icon',
    'fallback' => 'exclamation-triangle',
    'class' => 'w-6 h-6 text-gray-700 flex-shrink-0',
    'attributes' => [
        'role' => 'img',
        'data-version' => '2.0',
    ],
];

```

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

### Clone Repository and Install Dependencies

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Clone the repository and install development dependencies for package development.

```bash
git clone https://github.com/driesvints/blade-heroicons.git
cd blade-heroicons
composer install
```

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

### Install Production Dependencies

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Install only production dependencies for deployment.

```bash
composer install --no-dev
```

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

### Minimal Configuration Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

This configuration sets only the 'prefix' option. All other configuration values will use their default settings.

```php
<?php

return [
    'prefix' => 'heroicon',
];

```

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

### Production Configuration Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

An example of a production-ready configuration for Blade Heroicons, focusing on performance and essential settings. It might include a fallback icon and specific class definitions.

```yaml
return [
    'prefix' => 'heroicon',
    'fallback' => 'exclamation-triangle',
    'class' => 'w-5 h-5',
    'attributes' => [],
];
```

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

### Install Blade Heroicons

Source: https://github.com/driesvints/blade-heroicons/blob/main/README.md

Use Composer to install the package. Requires PHP 8.0+ and Laravel 9.0+.

```bash
composer require blade-ui-kit/blade-heroicons
```

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

### Verify Package Installation

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

After installation, use this Composer command to confirm that Blade Heroicons has been successfully added to your project.

```bash
composer show blade-ui-kit/blade-heroicons
```

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

### Example of Merged Configuration

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

Illustrates the final configuration when a custom prefix is defined in the published config file, while other settings default to package values.

```php
return [
    'prefix' => 'icon',           // From config/blade-heroicons.php
    'fallback' => '',             // From package defaults
    'class' => '',                // From package defaults
    'attributes' => [],           // From package defaults
]
```

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

### Environment-Based Configuration Setup

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

Shows how to configure Blade Heroicons using environment variables, allowing for different settings per environment.

```php
<?php

return [
    'prefix' => env('ICON_PREFIX', 'heroicon'),
    'fallback' => env('ICON_FALLBACK', ''),
    'class' => env('ICON_DEFAULT_CLASS', ''),
    'attributes' => [
        'width' => env('ICON_WIDTH', null),
        'height' => env('ICON_HEIGHT', null),
    ],
];
```

```env
ICON_PREFIX=heroicon
ICON_DEFAULT_CLASS=w-5 h-5
ICON_WIDTH=24
ICON_HEIGHT=24
```

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

### Example SVG File Structure (o-bell.svg)

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/07-publishing-and-assets.md

Each published SVG file is a complete, valid SVG document. This example shows the structure of the 'o-bell.svg' icon.

```xml
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
  <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/>
</svg>
```

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

### Changing Fallback Icon Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

Shows how setting a 'fallback' icon prevents exceptions when an icon is not found, rendering the fallback instead.

```php
// Old config: 'fallback' => '' (throws exception)
// New config: 'fallback' => 'question-mark-circle'

// Old behavior: Exception thrown
// New behavior: question-mark-circle renders silently
```

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

### Production Configuration Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

This configuration is optimized for production, using a safe fallback icon and defining the default CSS class via an environment variable.

```php
<?php

return [
    'prefix' => 'heroicon',
    'fallback' => 'help-circle', // Safe fallback
    'class' => env('ICON_DEFAULT_CLASS', 'w-5 h-5'),
    'attributes' => [
        'role' => 'presentation',
    ],
];

```

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

### Blade Icons Fluent API Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

This example showcases the fluent API provided by Blade Icons for configuring and rendering icons. It allows for chaining methods to set attributes and classes.

```php
Blade::icons()->heroicon('academic-cap', ['class' => 'w-6 h-6', 'style' => 'color: red;']);
```

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

### Example Configuration Merge

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

Illustrates how package default configuration values are merged with user-defined configurations. The final configuration merges user-defined values with any missing keys from the package defaults.

```php
['prefix' => 'heroicon', 'fallback' => '', 'class' => '', 'attributes' => []]
```

```php
['prefix' => 'icon']
```

```php
['prefix' => 'icon', 'fallback' => '', 'class' => '', 'attributes' => []]
```

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

### SVG Post-Processing Middleware Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

Implement custom logic to modify SVG output after compilation. This example shows a basic middleware structure that can be used for post-processing SVG content.

```php
class SvgMiddleware
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        
        // Post-process SVG content if needed
        return $response;
    }
}
```

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

### Tailwind + Heroicons Configuration Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

This configuration is tailored for use with Tailwind CSS, setting a simple 'inline-block' class and an empty attributes array.

```php
<?php

return [
    'prefix' => 'heroicon',
    'fallback' => '',
    'class' => 'inline-block',
    'attributes' => [],
];

```

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

### Changing Icon Prefix Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

Demonstrates how changing the 'prefix' configuration value affects the usage of icon components in Blade views.

```blade
// Old config: 'prefix' => 'heroicon'
// Old usage: <x-heroicon-o-bell/>

// New config: 'prefix' => 'icon'
// New usage: <x-icon-o-bell/>
```

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

### Install Blade Heroicons via Composer

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Use Composer to add the Blade Heroicons package to your Laravel project. This is the standard installation method.

```bash
composer require "codeat3/blade-heroicons"
```

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

### Accessing Configuration in Service Providers

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

Inject the `Repository` contract to access configuration values in your service providers or application code. This example shows how to retrieve prefix, fallback, class, and attribute settings.

```php
use Illuminate\Contracts\Config\Repository;

class MyService {
    public function __construct(Repository $config) {
        $config = $config->get('blade-heroicons');
        $prefix = $config['prefix']; // 'heroicon'
        $fallback = $config['fallback']; // ''
        $class = $config['class']; // ''
        $attributes = $config['attributes']; // []
    }
}
```

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

### Accessing Configuration in Tests

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

Use the `config()` helper function to access configuration values directly within your tests. This example asserts the default prefix value.

```php
$config = config('blade-heroicons');
$this->assertEquals('heroicon', $config['prefix']);
```

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

### Changing Default Classes Example

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

Illustrates how modifying the 'class' configuration impacts newly rendered icons and those without explicit classes.

```blade
// Old config: 'class' => ''
// New config: 'class' => 'w-6 h-6 text-gray-500'

// Behavior:
// <x-heroicon-o-bell/>                    <!-- Uses new defaults -->
// <x-heroicon-o-bell class="w-8 h-8"/>   <!-- User class persists -->
```

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

### Controller Usage for Icon Service

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/10-testing-and-examples.md

Demonstrates how to inject and use the IconService within a Laravel controller to render icons and get asset URLs.

```php
// In controller
class ReportController extends Controller
{
    public function __construct(private IconService $icons) {}
    
    public function show()
    {
        return view('report.show', [
            'statusIcon' => $this->icons->statusIcon('success'),
            'iconUrl' => $this->icons->assetUrl('document-text'),
        ]);
    }
}

```

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

### Register Route for View Test

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Example route definition to render a Blade view. This can be used to test if the Heroicon component is rendering correctly in your application.

```php
Route::get('/test', function () {
    return view('test');
});
```

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

### Navigation Link with Icon

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/00-index.md

Create a navigation link that includes an icon for better usability. This example shows a dashboard link.

```blade
<a href="/dashboard" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-100">
    <x-heroicon-o-home class="w-5 h-5"/>
    Dashboard
</a>
```

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

### Navigation Bar with Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Example of using navigation icons for links in a navigation bar. Ensure icons are sized appropriately using Tailwind CSS classes.

```blade
<nav class="flex items-center gap-4">
    <a href="/">
        <x-heroicon-o-home class="w-5 h-5"/>
    </a>
    <a href="/about">
        <x-heroicon-o-information-circle class="w-5 h-5"/>
    </a>
</nav>
```

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

### Render Heroicon in Blade View

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Example of how to render a Heroicon component directly in your Blade views. Ensure the icon name and style (outline 'o' or solid 's') are correct.

```blade
<x-heroicon-o-bell/>
```

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

### Use Icons in Blade Templates

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Integrate Heroicons directly into your Blade views using the provided component syntax. This example shows usage within layout and component contexts.

```blade
<!-- In layouts -->
<x-app-layout>
    <header>
        <nav class="flex items-center gap-4">
            <a href="/">
                <x-heroicon-o-home class="w-5 h-5"/>
            </a>
        </nav>
    </header>
    
    {{ $slot }}
</x-app-layout>

<!-- In components -->
<div class="alert alert-info">
    <x-heroicon-o-information-circle class="w-5 h-5"/>
    <p>{{ $message }}</p>
</div>
```

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

### Responsive Icon Sizing

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/03-blade-components.md

Control icon size responsively using Tailwind CSS classes. This example sets a smaller size for mobile and a larger size for larger screens.

```blade
<!-- Mobile: w-5, Desktop: w-6 -->
<x-heroicon-o-menu class="w-5 h-5 md:w-6 md:h-6"/>
```

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

### Basic Icon Rendering in Blade

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/02-service-provider-api.md

Use these components directly in your Blade views after installation to render icons. Different prefixes denote icon styles (outline, solid, mini, micro) and sizes.

```blade
<x-heroicon-o-arrow-left/>
```

```blade
<x-heroicon-s-arrow-left/>
```

```blade
<x-heroicon-m-arrow-left/>
```

```blade
<x-heroicon-c-arrow-left/>
```

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

### Create Custom View Component for Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

Define reusable icon wrapper components in Blade. This example demonstrates a dynamic component that renders a Heroicon based on provided type and icon name props.

```blade
// resources/views/components/alert-icon.blade.php
@props(['type' => 'info', 'icon' => 'information-circle'])

<x-dynamic-component :component="'heroicon-o-' . $icon" class="w-5 h-5"/>
```

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

### boot(): void

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/02-service-provider-api.md

Called during the service provider boot phase, after all services are registered. This method publishes package assets and configuration when running in the console. Developers typically interact with this method indirectly via Artisan commands.

```APIDOC
## boot(): void

### Description
Called during the service provider boot phase, after all services are registered. This method publishes package assets and configuration when running in the console.

### Signature
```php
public function boot(): void
```

### Parameters
None

### Return Type
`void`

### Behavior
1. Checks if the application is running in console mode (`$this->app->runningInConsole()`)
2. If console: publishes the SVG icon files from `resources/svg` to `public/vendor/blade-heroicons`
3. If console: publishes the configuration file from `config/blade-heroicons.php` to the application's `config/` directory

### Publishing Tags
- Tag `blade-heroicons`: Publishes raw SVG files to `public/vendor/blade-heroicons`
- Tag `blade-heroicons-config`: Publishes configuration to `config/blade-heroicons.php`

### Example Usage
```php
// Developers use artisan commands to publish assets (automatic via boot())

// Publish SVG files to public directory
php artisan vendor:publish --tag=blade-heroicons

// Publish and force overwrite existing files
php artisan vendor:publish --tag=blade-heroicons --force

// Publish configuration file
php artisan vendor:publish --tag=blade-heroicons-config
```
```

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

### Boot Blade Heroicons Service Provider

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

This method handles the boot phase of the service provider. If the application is running in the console, it registers paths for publishing SVG assets and configuration files.

```php
public function boot(): void
{
    if ($this->app->runningInConsole()) {
        // Publish SVG assets
        $this->publishes([
            __DIR__.'/../resources/svg' => public_path('vendor/blade-heroicons'),
        ], 'blade-heroicons');
        
        // Publish configuration
        $this->publishes([
            __DIR__.'/../config/blade-heroicons.php' => $this->app->configPath('blade-heroicons.php'),
        ], 'blade-heroicons-config');
    }
}
```

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

### Checkbox with Icon Confirmation

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Example of a checkbox that displays a check icon when selected. This provides a visual confirmation of the checked state.

```blade
<label class="flex items-center gap-2">
    <input type="checkbox" class="rounded"/>
    <x-heroicon-o-check class="w-4 h-4 text-green-500"/>
    I agree
</label>
```

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

### Publish Configuration File

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/README.md

Optionally publish the configuration file to customize package settings. This command requires the `php artisan` command.

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

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

### List Solid Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Lists the first 20 solid icons from the resources/svg directory. Useful for identifying and previewing solid style icons.

```bash
ls resources/svg/ | grep "^s-" | head -20  # List solid icons
```

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

### Run Tests and Linting

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Execute tests and linting checks for the package.

```bash
composer test
```

```bash
composer lint
```

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

### Accessing Configuration in Application

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/02-service-provider-api.md

Demonstrates how to retrieve the 'blade-heroicons' configuration values from the application's config repository. This is useful for dynamically accessing settings like the icon component prefix.

```php
$config = $this->app->make('config')->get('blade-heroicons');
$prefix = $config['prefix'] ?? 'heroicon';
```

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

### Enable View Caching in Production

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Configure view caching in `config/view.php` and set the expiration in `.env` for production performance.

```php
'cache' => env('VIEW_CACHE_EXPIRATION', 3600),
```

```env
VIEW_CACHE_EXPIRATION=3600
```

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

### Basic Heroicon Component Usage

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/03-blade-components.md

Demonstrates the simplest way to render an outline-style Heroicon component. This is the default way to include an icon.

```blade
<x-heroicon-o-arrow-left/>
```

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

### Document List Display with Document, Photo, and Video Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Organize and display different file types in a list, using `x-heroicon-o-document`, `x-heroicon-o-photo`, and `x-heroicon-o-video-camera` to visually distinguish them.

```blade
<div class="space-y-2">
    <div class="flex items-center gap-3 p-2">
        <x-heroicon-o-document class="w-5 h-5 text-blue-500"/>
        <span>Report.pdf</span>
    </div>
    <div class="flex items-center gap-3 p-2">
        <x-heroicon-o-photo class="w-5 h-5 text-green-500"/>
        <span>photo.jpg</span>
    </div>
    <div class="flex items-center gap-3 p-2">
        <x-heroicon-o-video-camera class="w-5 h-5 text-red-500"/>
        <span>video.mp4</span>
    </div>
</div>
```

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

### Blade Icons View Caching

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Example of enabling view caching for Blade Icons to improve performance. This is typically configured in the application's configuration files.

```php
// Example configuration snippet (actual location may vary)
'cache' => true,
```

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

### Basic Blade Component Usage

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Demonstrates the basic syntax for using a Blade Heroicon component. The naming convention is <x-heroicon-{style}-{name}/>. Ensure the correct style and icon name are used.

```blade
<x-heroicon-o-academic-cap />
```

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

### Blade Heroicons Dependency Chain

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/00-index.md

Details the dependency hierarchy for the blade-heroicons package within a Laravel application, starting from the app itself down to the core SVG icon library.

```text
Your Laravel App
  ↓
blade-ui-kit/blade-heroicons (^2.0)
  ↓
blade-ui-kit/blade-icons (^1.6)
  ↓
illuminate/support (^9.0|^10.0|^11.0|^12.0|^13.0)
  ↓
refactoringui/heroicons (1,290+ SVG icons)
```

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

### Publish Assets to Custom Directory

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/07-publishing-and-assets.md

After configuring a custom publishing directory in your service provider, run the vendor:publish command to publish the assets to the specified location.

```bash
php artisan vendor:publish --tag=blade-heroicons
# Files published to: public/icons/heroicons/
```

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

### List Micro Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Lists the first 20 micro icons from the resources/svg directory. This command is helpful for developers looking for the smallest icon sizes.

```bash
ls resources/svg/ | grep "^c-" | head -20  # List micro icons
```

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

### Configure Local Project for Path Repository

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Configure your local project's composer.json to use the package from a local path for testing.

```json
{
    "repositories": [
        {
            "type": "path",
            "url": "/path/to/blade-heroicons"
        }
    ],
    "require": {
        "blade-ui-kit/blade-heroicons": "@dev"
    }
}
```

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

### Responsive Size Icon in Blade

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/07-publishing-and-assets.md

Apply Tailwind CSS classes to the `<img>` tag for responsive sizing. This example sets base size and larger sizes for medium screens and up.

```blade
<!-- Responsive size -->
<img src="{{ asset('vendor/blade-heroicons/o-bell.svg') }}" 
     class="w-6 h-6 md:w-8 md:h-8"/>
```

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

### Run Tests with Verbose Output

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/10-testing-and-examples.md

Run all tests with detailed output to help diagnose issues. Use this command for more insight into test execution.

```bash
composer test -- --verbose
```

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

### Applying SVG Attributes to Blade Components

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Illustrates how to pass arbitrary SVG attributes to a Blade Heroicon component. These attributes are directly applied to the root SVG element. For example, 'aria-hidden' for accessibility.

```blade
<x-heroicon-o-academic-cap aria-hidden="true" />
```

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

### Publish Configuration File

Source: https://github.com/driesvints/blade-heroicons/blob/main/README.md

Publish the configuration file to customize default classes, attributes, and other Blade Icons features.

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

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

### Displaying Tips with Lightbulb Icon

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Employs the light-bulb icon to present helpful tips or suggestions to the user.

```blade
<!-- Tip/Lightbulb -->
<div class="flex items-start gap-3 p-4 bg-blue-50 rounded">
    <x-heroicon-o-light-bulb class="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5"/>
    <p class="text-blue-900">Tip: You can speed up your workflow by using keyboard shortcuts.</p>
</div>
```

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

### Default Configuration File

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

The default configuration file for Blade Heroicons.

```php
<?php

return [
    'prefix' => 'heroicon',
    'fallback' => '',
    'class' => '',
    'attributes' => [],
];
```

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

### Basic Blade Component Usage

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/README.md

Render Heroicons as Blade components using different styles (outline 'o', solid 's', mini 'm') and apply classes or inline styles.

```blade
<x-heroicon-o-bell/>
<x-heroicon-s-arrow-left class="w-6 h-6"/>
<x-heroicon-m-user style="color: blue;"/>
```

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

### Accessing Configuration in Blade Views

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

Configuration is not directly accessible in Blade. Use a view composer in a service provider to pass configuration values to your views. This example passes the entire `blade-heroicons` configuration array.

```php
// In a service provider
View::composer('*', function ($view) {
    $view->with('iconConfig', config('blade-heroicons'));
});
```

```blade
{{ $iconConfig['prefix'] ?? 'heroicon' }}
```

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

### Using Published SVG Assets in HTML

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Example of how to use a published SVG icon asset directly within an HTML `<img>` tag. This approach is suitable when you need to reference icons as static image files.

```html
<img src="/vendor/blade-heroicons/outline/academic-cap.svg" alt="Academic Cap Icon">
```

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

### File Path Resolution Process

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

Shows how the icon name is used to construct the full file path to the SVG resource.

```text
Icon "o-bell"
   ↓
Constructed path: resources/svg/o-bell.svg
   ↓
Full path: /vendor/blade-heroicons/resources/svg/o-bell.svg
```

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

### Testing Basic Icon Compilation

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Run basic tests to ensure icon compilation works as expected. This is part of the package's test suite.

```php
public function test_basic_icon_compilation()
{
    $this->assertIsString(Blade::render('<x-heroicon-o-academic-cap />'));
}
```

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

### List Outline Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Lists the first 20 outline icons found in the resources/svg directory. This command helps in quickly browsing available icon assets.

```bash
ls resources/svg/ | grep "^o-" | head -20  # List outline icons
```

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

### Run All Tests

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/10-testing-and-examples.md

Execute the entire test suite for Blade Heroicons using Composer. This command verifies all core functionalities.

```bash
composer test
```

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

### Render Heroicon using SVG Fluent API

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/06-blade-icons-integration.md

Build SVG output dynamically using a fluent API with method chaining. This provides a flexible way to construct icon elements with various attributes.

```php
svg('heroicon-o-bell')
    ->class('w-6 h-6')
    ->style('color: red')
    ->toHtml()
```

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

### User Navigation Menu with User Circle and Cog Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Implement navigation links for user-specific sections like profile and settings, using `x-heroicon-o-user-circle` and `x-heroicon-o-cog` for clear visual representation.

```blade
<div class="space-y-2">
    <a href="/profile" class="flex items-center gap-2 p-2 hover:bg-gray-100">
        <x-heroicon-o-user-circle class="w-5 h-5"/>
        Profile
    </a>
    <a href="/settings" class="flex items-center gap-2 p-2 hover:bg-gray-100">
        <x-heroicon-o-cog class="w-5 h-5"/>
        Settings
    </a>
</div>
```

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

### Asset Publishing Command

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

Demonstrates the Artisan command used to publish Blade Heroicons assets, including the source and destination paths for the SVG files.

```bash
php artisan vendor:publish --tag=blade-heroicons
    │
    ├─ Finds all published paths tagged 'blade-heroicons'
    ├─ For each path pair:
    │   ├─ Source: vendor/blade-ui-kit/blade-heroicons/resources/svg
    │   ├─ Destination: public/vendor/blade-heroicons
    │   └─ Copies all files (with --force flag, overwrites existing)
    │
    └─ Complete
```

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

### Publishing Configuration

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Command to publish the Blade Heroicons configuration file. This allows for customization of default settings like prefixes, fallbacks, and classes.

```bash
php artisan vendor:publish --tag=heroicons-config
```

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

### Factory Lookup Process

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

Details the factory's process of searching for a registered component set and then locating the specific icon within that set.

```text
Factory searches for component "heroicon-o-bell"
   ↓
Finds registered set: "heroicons"
   ↓
Looks for icon: "o-bell"
```

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

### Enable View Caching

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/03-blade-components.md

Configure view caching in `config/view.php` for performance. Cached views bypass SVG file lookups and compilation.

```php
'cache' => env('VIEW_CACHE_EXPIRATION', 3600),
```

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

### BladeHeroiconsServiceProvider Boot Method

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

The `boot` method of the service provider registers the custom directive and component aliases, making them available in Blade views.

```php
public function boot()
{
    Blade::directive('heroicon', function ($expression) {
        return "<?php echo BladeHeroicons::render(...".collect(func_get_args()).collect(explode(',', str_replace(['(',')','"',' '], '', $expression)))->map(fn($item) => "'{$item}'")->implode(',')."); ?>";
    });

    $this->loadViewComponentsAs('heroicon', [
        'heroicon' => 
    ]);

    $this->publishes([
        __DIR__.'/../config/heroicons.php' => config_path('heroicons.php'),
    ], 'heroicons-config');

    $this->publishes([
        __DIR__.'/../resources/svg' => public_path('vendor/heroicons'),
    ], 'heroicons-assets');
}
```

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

### Publish Assets

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/README.md

Publish the package's assets, such as CSS or JavaScript files, to your public directory using this Artisan command.

```bash
php artisan vendor:publish --tag=blade-heroicons
```

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

### Register Service Provider in composer.json

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Configure service provider registration in `composer.json` for auto-discovery.

```json
"extra": {
    "laravel": {
        "providers": [
            "BladeUI\Heroicons\BladeHeroiconsServiceProvider"
        ]
    }
}
```

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

### Check PHP Version

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Use this command to verify your current PHP version. Ensure it meets the minimum requirement of PHP 8.0.

```bash
php --version
```

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

### Dynamic Icon Rendering Service

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/10-testing-and-examples.md

Use this service to render icons dynamically by name and configuration. It allows specifying style, CSS classes, and custom HTML attributes.

```php
<?php

namespace App\Services;

use Illuminate\Support\HtmlString;

class IconService
{
    /**
     * Render an icon by name and configuration
     */
    public function render(string $icon, array $config = []): HtmlString
    {
        $style = $config['style'] ?? 'o';
        $class = $config['class'] ?? '';
        $attributes = $config['attributes'] ?? [];
        
        $svg = svg("heroicon-{$style}-{$icon}", $class);
        
        foreach ($attributes as $name => $value) {
            $svg->attribute($name, $value);
        }
        
        return new HtmlString($svg->toHtml());
    }
    
    /**
     * Render icon for a given status
     */
    public function statusIcon(string $status): HtmlString
    {
        $iconMap = [
            'success' => 'check-circle',
            'error' => 'x-circle',
            'warning' => 'exclamation-triangle',
            'info' => 'information-circle',
        ];
        
        $icon = $iconMap[$status] ?? 'question-mark-circle';
        
        return $this->render($icon, [
            'class' => 'w-5 h-5',
        ]);
    }
    
    /**
     * Get icon URL for static asset
     */
    public function assetUrl(string $icon, string $style = 'o'): string
    {
        return asset("vendor/blade-heroicons/{$style}-{$icon}.svg");
    }
}

```

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

### Icon Service for Dynamic Rendering

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Utilize the Icon Service to dynamically render icons based on data or conditions. This is an advanced usage pattern for flexible icon display.

```php
use Codeat3\BladeHeroicons\IconService;

$iconService = app(IconService::class);

echo $iconService->render('academic-cap', 'outline', ['class' => 'w-8 h-8']);
```

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

### Serve Icons via API for Mobile Apps

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/07-publishing-and-assets.md

Create a route to serve specific SVG icon files directly from the public directory, suitable for mobile app integration.

```php
Route::get('/api/icons/{style}/{name}', function ($style, $name) {
    $path = public_path("vendor/blade-heroicons/{$style}-{$name}.svg");
    
    if (file_exists($path)) {
        return response()->file($path, [
            'Content-Type' => 'image/svg+xml',
            'Cache-Control' => 'public, max-age=31536000',
        ]);
    }
    
    abort(404);
});
```

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

### Back Button with Icon

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Demonstrates creating a back button that includes an arrow icon. The icon size can be adjusted as needed.

```blade
<button class="flex items-center gap-2">
    <x-heroicon-o-arrow-left class="w-4 h-4"/>
    Back
</button>
```

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

### Serve Icons via CDN

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/07-publishing-and-assets.md

Illustrates how to link to published SVGs when using a Content Delivery Network (CDN) for global distribution.

```blade
<!-- CDN URL (if configured) -->
<img src="https://cdn.example.com/vendor/blade-heroicons/o-bell.svg" alt="Bell"/>

<!-- Or with asset helper pointing to CDN -->
<img src="{{ asset('vendor/blade-heroicons/o-bell.svg') }}" alt="Bell"/>
```

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

### List Mini Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Displays the first 20 mini icons available in the SVG resources. This command is for users who need to find smaller icon variants.

```bash
ls resources/svg/ | grep "^m-" | head -20  # List mini icons
```

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

### Set Public Directory Permissions

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/07-publishing-and-assets.md

Ensure the public directory and its contents have the correct file permissions to allow web server access. This is a common cause of 'file not found' errors in production.

```bash
chmod 755 public/vendor/blade-heroicons
```

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

### Action Buttons with Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Illustrates using icons for common action buttons like add, remove, and settings. Icons are placed within buttons for clear visual cues.

```blade
<div class="flex gap-2">
    <button class="p-2 hover:bg-gray-100 rounded">
        <x-heroicon-o-plus class="w-5 h-5"/>
    </button>
    <button class="p-2 hover:bg-gray-100 rounded">
        <x-heroicon-o-minus class="w-5 h-5"/>
    </button>
    <button class="p-2 hover:bg-gray-100 rounded">
        <x-heroicon-o-cog class="w-5 h-5"/>
    </button>
</div>
```

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

### Package Structure

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/01-project-overview.md

Illustrates the directory structure of the Blade Heroicons package, highlighting key files and directories such as the service provider, configuration files, and SVG resources.

```tree
blade-heroicons/
├── src/
│   └── BladeHeroiconsServiceProvider.php    # Service provider (entry point)
├── config/
│   ├── blade-heroicons.php                  # Published configuration
│   └── generation.php                       # Icon generation configuration (build-time)
├── resources/
│   └── svg/                                 # 1,290+ SVG icon files
├── tests/
│   └── CompilesIconsTest.php               # Test suite
└── composer.json                            # Package manifest
```

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

### SVG Content Loading Process

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

Describes the step where the SVG file content is read from the filesystem as a string.

```text
SVG file read from filesystem
   ↓
File content (string):
<svg xmlns="..." viewBox="0 0 24 24" ...>
  <path .../>
</svg>
```

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

### Icon Set Registry Structure

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

Details the structure of the factory's icon set registry, showing how icon sets are organized with their paths, prefixes, and registered icons.

```text
Factory Icon Sets Registry
├── heroicons
│   ├── path: /blade-heroicons/resources/svg
│   ├── prefix: heroicon
│   ├── fallback: ''
│   ├── class: ''
│   ├── attributes: []
│   │
│   └── Registered Icons Index
│       ├── o-bell → resources/svg/o-bell.svg
│       ├── o-arrow-left → resources/svg/o-arrow-left.svg
│       ├── s-bell → resources/svg/s-bell.svg
│       └── ... (1,290+ entries)
│
└── [Other icon sets if registered]
    ├── custom-icons
    └── ...
```

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

### Accessing Configuration in Code

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Demonstrates how to access the Blade Heroicons configuration values programmatically within your application. This is useful for dynamic icon rendering or conditional logic.

```php
config('heroicons.prefix');
config('heroicons.class');
```

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

### Test Basic Icon Compilation

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/10-testing-and-examples.md

Verifies that a single icon component compiles to its correct SVG HTML representation. Ensures icon resolution and SVG structure are as expected.

```php
public function test_it_compiles_a_single_anonymous_component()
{
    $result = svg('heroicon-o-bell')->toHtml();
    
    $expected = <<<'SVG'
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
          <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/>
        </svg>
    SVG;
    
    $this->assertSame($expected, $result);
}
```

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

### Test Icon Rendering Performance

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/10-testing-and-examples.md

Measures the performance of rendering 100 icons to ensure it completes within a reasonable time, specifically under 1 second. This test helps identify performance bottlenecks in icon rendering.

```php
class IconPerformanceTest extends TestCase
{
    public function test_icon_rendering_performance()
    {
        $startTime = microtime(true);
        
        for ($i = 0; $i < 100; $i++) {
            svg('heroicon-o-bell')->toHtml();
        }
        
        $duration = microtime(true) - $startTime;
        
        // Should complete in reasonable time
        $this->assertLessThan(1, $duration); // 100 icons in < 1 second
    }
}
```

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

### Media Gallery Placeholder with Photo Icon

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/05-icon-catalog.md

Use the `x-heroicon-o-photo` icon within a grid layout to represent image placeholders in a media gallery.

```blade
<div class="grid grid-cols-3 gap-4">
    <div class="aspect-square bg-gray-200 flex items-center justify-center rounded">
        <x-heroicon-o-photo class="w-8 h-8 text-gray-400"/>
    </div>
</div>
```

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

### Configure Browser Caching for SVG Assets

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/07-publishing-and-assets.md

Implement middleware or a route to serve SVG assets with appropriate caching headers for optimal browser performance.

```php
// In a middleware or route
Route::get('/vendor/blade-heroicons/{file}', function ($file) {
    $path = public_path("vendor/blade-heroicons/{$file}.svg");
    
    return response()
        ->file($path)
        ->header('Cache-Control', 'public, max-age=31536000')
        ->header('ETag', md5_file($path));
});
```

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

### Customizing Blade Heroicons Configuration

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/02-service-provider-api.md

Edit the published `config/blade-heroicons.php` file to set global defaults for icon rendering, such as the default class and dimensions.

```php
return [
    'prefix' => 'heroicon',
    'class' => 'text-gray-500',  // Default class applied to all icons
    'attributes' => [
        'width' => 24,
        'height' => 24,
    ],
];
```

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

### Customize Published Asset Directory

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/07-publishing-and-assets.md

Customize the publication directory for assets by defining the target path in your service provider's boot method. This allows you to organize published assets according to your project's structure.

```php
public function boot()
{
    $this->publishes([
        __DIR__.'/../resources/svg' => public_path('icons/heroicons'),
    ], 'blade-heroicons');
}
```

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

### Clear Application Caches

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Clear various application caches before deploying.

```bash
php artisan cache:clear
```

```bash
php artisan view:clear
```

```bash
php artisan config:clear
```

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

### Publish BladeHeroicons Assets and Configuration

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/02-service-provider-api.md

This method is automatically executed by Laravel during the service provider boot phase when running in the console. It handles publishing the package's SVG icon files and configuration.

```bash
// Developers use artisan commands to publish assets (automatic via boot())

// Publish SVG files to public directory
php artisan vendor:publish --tag=blade-heroicons

// Publish and force overwrite existing files
php artisan vendor:publish --tag=blade-heroicons --force

// Publish configuration file
php artisan vendor:publish --tag=blade-heroicons-config
```

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

### Register Service Provider in config/app.php

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/08-installation-and-setup.md

Manually register the Blade Heroicons service provider in `config/app.php` if auto-discovery is disabled.

```php
'providers' => ServiceProvider::defaultProviders()->merge([
    // ...
    BladeUI\Heroicons\BladeHeroiconsServiceProvider::class,
])->toArray(),
```

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

### Publish Blade Heroicons Assets

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/00-index.md

Publish the SVG files or the configuration file for Blade Heroicons using Artisan commands.

```bash
# Publish SVG files
php artisan vendor:publish --tag=blade-heroicons
```

```bash
# Publish configuration
php artisan vendor:publish --tag=blade-heroicons-config
```

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

### Configure Fallback Icon

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

Specify a fallback icon to render when a requested icon is not found. This prevents exceptions and provides a default visual.

```php
'fallback' => '',
```

```php
'fallback' => 'question-mark-circle',
```

```php
'fallback' => 'exclamation-triangle',
```

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

### Use Solid Heroicon Component

Source: https://github.com/driesvints/blade-heroicons/blob/main/README.md

Render a solid style icon using its corresponding Blade component. The 's-' prefix denotes the solid style.

```blade
<x-heroicon-s-arrow-left/>
```

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

### Use Mini Heroicon Component

Source: https://github.com/driesvints/blade-heroicons/blob/main/README.md

Render a mini style icon using its corresponding Blade component. The 'm-' prefix denotes the mini style.

```blade
<x-heroicon-m-arrow-left/>
```

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

### View Caching Flow

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/09-architecture-and-internals.md

Illustrates the difference in view rendering performance with and without caching enabled. Caching significantly reduces processing time by loading pre-compiled views.

```text
View Rendered (First Time)
    │
    ├─ <x-heroicon-o-bell/> encountered
    ├─ Component compiled to PHP
    ├─ SVG loaded and merged with attributes
    ├─ Result cached as compiled view
    │
    └─ Compiled view stored in storage/framework/views/

View Rendered (Subsequent Times)
    │
    ├─ Cached compiled view loaded
    ├─ No component compilation needed
    ├─ No SVG file reads needed
    │
    └─ Fast execution from cache
```

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

### Blade Icons Fallback Icons

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/DOCUMENTATION-SUMMARY.txt

Demonstrates how to configure a fallback icon that will be rendered if a requested icon is not found. This ensures a consistent UI even when icons are missing.

```php
// Example configuration snippet (actual location may vary)
'fallback' => 'question-mark-circle',
```

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

### Default Configuration File Structure

Source: https://github.com/driesvints/blade-heroicons/blob/main/_autodocs/04-configuration-reference.md

This is the default structure of the blade-heroicons.php configuration file. It defines default values for icon rendering.

```php
<?php

return [
    'prefix' => 'heroicon',
    'fallback' => '',
    'class' => '',
    'attributes' => [
        // 'width' => 50,
        // 'height' => 50,
    ],
];
```

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

### Use Micro Heroicon Component

Source: https://github.com/driesvints/blade-heroicons/blob/main/README.md

Render a micro style icon using its corresponding Blade component. The 'c-' prefix denotes the micro style.

```blade
<x-heroicon-c-arrow-left/>
```