README

A package for convenient use of lucide icons in Laravel Blade templates and the Moonshine admin panel.

✨ Features

Automatic use of Lucide icons in the Moonshine admin panel
Access to more than 1000+ high-quality SVG icons
Simple usage through Blade components
Full support for customizing styles and attributes
Icon caching capability for improved performance

📋 Requirements

PHP 8.2 or higher
Laravel 10.0 or higher
Moonshine 3.0 or higher

🚀 Installation

1. Install the package using Composer

composer require prihod/moonshine-lucide-icons

2. Publish the icon.blade.php file from the package

php artisan vendor:publish --tag=moonshine-lucide-icons-blade

After executing the command, the icon.blade.php file will be placed in the resources/views/vendor/moonshine/components directory.

🔧 Configuration

Basic Blade Icons Setup

Moonshine Lucide Icons uses Blade Icons under the hood. For more information, check out the Blade Icons documentation.

Enable Caching (Recommended)

To improve performance, it's strongly recommended to enable caching for icons. After publishing the moonshine-lucide-icons.php configuration file, you can configure the caching parameters:

// config/moonshine-lucide-icons.php
return [
    // Other settings...
    
    'cache' => [
        'enabled' => true, 
        'key' => 'blade-lucide-icons',
        'ttl' => null, // unlimited storage time
    ],
    
    // Default classes and attributes...
];

Advanced Configuration

If you want to configure default classes, attributes, or other parameters, publish the configuration file:

php artisan vendor:publish --tag=moonshine-lucide-icons-config

After that, you can edit the config/moonshine-lucide-icons.php file.

🎨 Usage

Usage in Moonshine

When using in the Moonshine admin panel, continue using the default icon component:

The package automatically connects the icon from the Lucide library if it is missing from the standard Moonshine set.

Usage in Blade Templates

Icons can be used as self-closing Blade components:

<x-lucide-activity />

With CSS classes:

<x-lucide-album class="w-6 h-6 text-gray-500" />

With inline styles:

<x-lucide-anchor style="color: #555" />

With additional attributes:

<x-lucide-alert-circle 
    class="text-red-500"
    width="24"
    height="24"
    stroke-width="1.5"
/>

Dynamic Icons

You can use dynamic icon names:

@php
    $iconName = 'home';
@endphp

<x-dynamic-component 
    component="lucide-{{ $iconName }}" 
    class="w-6 h-6" 
/>

Using SVGs as Assets

If you prefer to use the original SVG icons as assets:

php artisan vendor:publish --tag=moonshine-lucide-icons --force

After that, you can use them in your views:

<img src="{{ asset('vendor/moonshine-lucide-icons/cloud-moon.svg') }}" width="24" height="24" />

🧠 IDE Hints

For auto-suggestions of icon names in IntelliJ IDEA and PhpStorm, use the MetaStorm plugin.

📚 Lucide Documentation

You can find a complete list of available icons on the official Lucide Icons website.

🤝 Contributing

If you'd like to contribute to the project's development, please create a Pull Request with your changes.

prihod / moonshine-lucide-icons

Maintainers

Details