PHP code example of syriable / filament-icon-hub

1. Go to this page and download the library: Download syriable/filament-icon-hub library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

syriable / filament-icon-hub example snippets


IconPicker::make('icon')

use Syriable\Filament\Plugins\IconHub\Forms\Components\IconPicker;

IconPicker::make('icon')
    ->

NavigationItem::make('Reports')->icon($category->icon); // Filament

IconPicker::make('icons')->multiple();

use Syriable\Filament\Plugins\IconHub\Forms\Components\IconSelect;

IconSelect::make('icon');

IconSelect::make('icons')
    ->multiple()
    ->providers(['heroicons', 'brand'])
    ->optionsLimit(30)            // icons per request (default 50)
    ->groupByProvider(false)      // default: grouped when several providers are offered
    ->grid(false)                 // list of "icon + name" rows instead of the tile grid
    ->extraIconAttributes(['class' => 'text-primary-600']);

use Syriable\Filament\Plugins\IconHub\Infolists\Components\IconHubEntry;
use Syriable\Filament\Plugins\IconHub\Tables\Columns\IconHubColumn;

IconHubColumn::make('icon');                          // also handles arrays
IconHubColumn::make('icon')->size('lg')->showLabel();

IconHubEntry::make('icon')->placeholder('No icon');

use Syriable\Filament\Plugins\IconHub\Facades\IconHub;

NavigationItem::make('Reports')->icon(IconHub::html($team->icon));

'blade_icons' => [
    'sets' => ['heroicons', 'lucide'],   // null = every registered set
    'except' => [],
    'labels' => ['heroicons' => 'Heroicons'],
    'variants' => [
        // Name prefix => variant label. Enables the "Style" filter.
        'heroicons' => ['o-' => 'Outline', 's-' => 'Solid', 'm-' => 'Mini', 'c-' => 'Micro'],
    ],
],

IconPicker::make('icon')->providers(['heroicons', 'lucide']);

// config/icon-hub.php
'local' => [
    'brand' => [
        'path' => resource_path('icons/brand'),
        'label' => 'Brand',
        'variants' => [], // optional, file-name prefix => label
    ],
],

namespace Syriable\Filament\Plugins\IconHub\Contracts;

interface IconProvider
{
    public function id(): string;                             // "company"
    public function label(): string;                          // "Company icons", must be cheap
    public function status(): ProviderStatus;                 // Available | Unconfigured | Unavailable, must be cheap
    public function metadata(): ProviderMetadata;             // categories, variants, remote, total
    public function search(IconQuery $query): IconResults;    // one page of icons
    public function find(string $name): ?Icon;                // resolve a stored value
}

use Syriable\Filament\Plugins\IconHub\Data\Icon;
use Syriable\Filament\Plugins\IconHub\Data\IconSource;
use Syriable\Filament\Plugins\IconHub\Providers\IndexedIconProvider;

final class DesignSystemIconProvider extends IndexedIconProvider
{
    public function id(): string
    {
        return 'ds';
    }

    public function label(): string
    {
        return 'Design system';
    }

    protected function buildIndex(): iterable
    {
        $manifest = json_decode(file_get_contents(base_path('design-system/icons.json')), true);

        foreach ($manifest['icons'] as $item) {
            yield new Icon(
                provider: 'ds',
                name: $item['slug'],
                label: $item['title'],
                source: IconSource::svgFile(base_path("design-system/svg/{$item['slug']}.svg")),
                category: $item['group'] ?? null,
                tags: $item['keywords'] ?? [],
            );
        }
    }

    protected function indexCacheKey(): array
    {
        // Rebuild the cached index whenever the manifest changes.
        return [filemtime(base_path('design-system/icons.json'))];
    }
}

namespace App\Icons;

use Illuminate\Http\Client\PendingRequest;
use Illuminate\Http\Client\Response;
use Syriable\Filament\Plugins\IconHub\Data\Icon;
use Syriable\Filament\Plugins\IconHub\Data\IconQuery;
use Syriable\Filament\Plugins\IconHub\Data\IconResults;
use Syriable\Filament\Plugins\IconHub\Data\IconSource;
use Syriable\Filament\Plugins\IconHub\Data\ProviderMetadata;
use Syriable\Filament\Plugins\IconHub\Providers\HttpIconProvider;

final class FlaticonProvider extends HttpIconProvider
{
    protected int $timeout = 4;

    public function id(): string
    {
        return 'flaticon';
    }

    public function label(): string
    {
        return 'Flaticon';
    }

    public function metadata(): ProviderMetadata
    {
        return new ProviderMetadata(
            categories: ['arrows' => 'Arrows', 'business' => 'Business', 'social' => 'Social'],
            remote: true,
        );
    }

    // Missing key: the provider shows as "not configured" instead of failing.
    protected function isConfigured(): bool
    {
        return filled(config('services.flaticon.key'));
    }

    // Credentials stay on the server. They are never part of an Icon.
    protected function http(): PendingRequest
    {
        return parent::http()
            ->baseUrl('https://api.flaticon.test/v3')
            ->withToken(config('services.flaticon.key'));
    }

    protected function searchRequest(PendingRequest $http, IconQuery $query): Response
    {
        return $http->get('/search/icons', array_filter([
            'q' => $query->search,
            'category' => $query->category,
            'page' => $query->page,
            'limit' => $query->perPage,
        ]));
    }

    protected function mapSearchResponse(array $data, IconQuery $query): IconResults
    {
        return new IconResults(
            icons: array_map($this->toIcon(...), $data['data']),
            hasMore: $data['metadata']['page'] < $data['metadata']['pages'],
            total: $data['metadata']['total'] ?? null,
        );
    }

    // Optional: resolve icons that are not in the cache yet.
    protected function findRequest(PendingRequest $http, string $name): ?Response
    {
        return $http->get("/item/icon/{$name}");
    }

    protected function mapIconResponse(array $data, string $name): ?Icon
    {
        return isset($data['data']) ? $this->toIcon($data['data']) : null;
    }

    private function toIcon(array $item): Icon
    {
        return new Icon(
            provider: 'flaticon',
            name: (string) $item['id'],
            label: $item['description'],
            source: IconSource::url($item['images']['64']),
            category: $item['category'] ?? null,
            tags: $item['tags'] ?? [],
        );
    }
}

// config/icon-hub.php
'providers' => [App\Icons\FlaticonProvider::class],

// 1. config/icon-hub.php, resolved from the container (dependencies injected)
'providers' => [App\Icons\CompanyIconProvider::class],

// 2. At runtime, e.g. in AppServiceProvider::boot()
use Syriable\Filament\Plugins\IconHub\Facades\IconHub;

IconHub::register(new CompanyIconProvider(...));
IconHub::register(CompanyIconProvider::class);

// 3. Lazily, only when icons are first needed
IconHub::discoverUsing(fn () => [new CompanyIconProvider(...)]);

IconHub::has('company');
IconHub::provider('company');          // throws ProviderNotFound
IconHub::providers(['heroicons', 'company']);
IconHub::forget('fontawesome-brands'); // remove a discovered provider
IconHub::status('flaticon');           // ProviderStatus
IconHub::find('heroicons:o-user');     // ?Icon, never throws

use Syriable\Filament\Plugins\IconHub\Data\IconQuery;

$page = IconHub::search(new IconQuery('arrow', perPage: 30), ['heroicons', 'lucide']);

$page->icons;       // list<Icon>
$page->errors;      // ['flaticon' => 'timeout']
$page->nextCursor;  // pass back for the next page

IconPicker::make('icon')
    ->providers(['heroicons', 'brand', 'flaticon'])
    ->showProviderFilter()      // default: automatic
    ->showVariantFilter()       // default: true
    ->showCategoryFilter();     // default: true

'cache' => [
    'enabled' => true,
    'store' => null,          // any cache store; null = default
    'prefix' => 'icon-hub',
    'ttl' => ['search' => 900], // null caches forever, but only if you set it explicitly
],

IconPicker::make('icon')
    ->providers(['heroicons', 'brand'])     // allow-list and order
    ->multiple()                            // store an array
    ->searchable(false)                     // hide the search input
    ->perPage(90)                           // icons per request
    ->placeholder('Pick an icon')
    ->modalHeading('Choose a menu icon')
    ->modalWidth(Width::FiveExtraLarge)
    ->showProviderFilter()
    ->showCategoryFilter(false)
    ->showVariantFilter(false);

IconPicker::make('icon')
    ->extraAttributes(['data-icon-picker' => 'true'])                     // wrapper
    ->extraAlpineAttributes(['x-on:icon-picked.window' => 'refresh()'])   // wrapper (Alpine)
    ->extraTriggerAttributes(['class' => 'my-trigger', 'data-test' => 'x']) // open button
    ->extraIconAttributes(['class' => 'my-icon', 'x-on:mouseenter' => 'preview($el)']); // every icon

   // config/icon-hub.php
   'library' => ['enabled' => true],
   

   use Syriable\Filament\Plugins\IconHub\IconHubPlugin;

   $panel->plugin(IconHubPlugin::make()->manageLibrary());
   

'hidden' => ['heroicons:o-trash', 'fontawesome-brands:tiktok'],

app(\Syriable\Filament\Plugins\IconHub\Actions\HideIcons::class)->handle(['heroicons:o-trash']);
app(\Syriable\Filament\Plugins\IconHub\Actions\RestoreIcon::class)->handle('heroicons:o-trash');
bash
php artisan vendor:publish --tag="icon-hub-config"
php artisan vendor:publish --tag="icon-hub-translations"
blade
{{-- Blade component --}}
<x-icon-hub::icon :icon="$category->icon" class="h-5 w-5 text-primary-600" />

{{-- Facade --}}
{{ \Syriable\Filament\Plugins\IconHub\Facades\IconHub::html($category->icon, ['class' => 'h-5 w-5']) }}
bash
   php artisan vendor:publish --tag="icon-hub-migrations"
   php artisan migrate