包简介

Standalone icon picker Blade component for Livewire forms

README 文档

README

A standalone icon picker Blade component for Livewire forms. Works with any blade-icons pack — Heroicons, Font Awesome, or custom sets.

<x-icon-picker::icon-picker wire:model="icon" :value="$icon" />

Installation

composer require nickperkins/blade-icon-picker
composer require blade-ui-kit/blade-heroicons  # recommended default icon pack

Publish the assets:

php artisan vendor:publish --tag=icon-picker-assets

Include the JS and CSS in your layout:

<head>
    <link rel="stylesheet" href="{{ asset('vendor/icon-picker/icon-picker.css') }}">
    {{-- ... --}}
</head>
<body>
    {{-- ... --}}
    <script src="{{ asset('vendor/icon-picker/icon-picker.js') }}"></script>
    {{-- Must come AFTER Alpine.js --}}
</body>

In Livewire 3, the JS auto-registers with Alpine — no manual Alpine.data() call needed.

Usage

Basic

<x-icon-picker::icon-picker wire:model="icon" :value="$icon" />

Important: Pass both wire:model (for write-back) and :value="$icon" (for initial/redisplay). This is required because the component is a Blade component, not a Livewire component.

Custom placeholder

<x-icon-picker::icon-picker
    wire:model="icon"
    :value="$icon"
    placeholder="Choose a menu icon"
/>

Disabled

<x-icon-picker::icon-picker
    wire:model="icon"
    :value="$icon"
    disabled
/>

Livewire form example

use Livewire\Component;

class CreateMenu extends Component
{
    public string $icon = '';

    public function rules(): array
    {
        return ['icon' => ['required', 'string']];
    }

    public function render()
    {
        return view('livewire.create-menu');
    }
}

<form wire:submit="save">
    <x-icon-picker::icon-picker wire:model="icon" :value="$icon" />

    @error('icon')
        <p class="text-red-500">{{ $message }}</p>
    @enderror

    <button type="submit">Save</button>
</form>

Features

Search: Substring token matching — type ar le to find Arrow Left
Lazy rendering: Icons render 30 at a time as you scroll
Keyboard navigation: Arrow keys, Enter, Escape
Responsive grid: 4 columns on mobile → 12 on desktop
Any blade-icons pack: Heroicons, Font Awesome, custom — all auto-discovered
Standalone CSS: No Tailwind dependency; override colors with CSS custom properties

Dark mode

The component ships dark-mode variables but does not auto-detect prefers-color-scheme — that’s your app’s job. Activate dark styles by adding the ip-dark class to the component or any ancestor, or by using a [data-theme="dark"] attribute on a parent element.

{{-- Follow a data-theme attribute on <html> (no extra markup needed) --}}
{{-- In your CSS: [data-theme="dark"] .ip-root { } is already handled --}}

{{-- Or apply ip-dark directly --}}
<x-icon-picker::icon-picker
    wire:model="icon"
    :value="$icon"
    class="ip-dark"
/>

If you want to mirror the OS preference, add it yourself:

@media (prefers-color-scheme: dark) {
    .ip-root { /* your app's dark scope */ }
}

Theming

Override the CSS custom properties anywhere in your stylesheet:

.icon-picker-root {
    --ip-primary: #dc2626;
    --ip-bg: #fef2f2;
}

Dark mode is supported automatically via prefers-color-scheme.

No icon packs installed?

The component renders a helpful message telling the developer to install blade-ui-kit/blade-heroicons.

Requirements

PHP 8.2+
Laravel 10, 11, or 12
Livewire 3
blade-icons 1.0+

Acknowledgments

Inspired by lukas-frey/filament-icon-picker, which demonstrated that an icon picker is a valuable UX pattern for Livewire forms.

License

MIT

nickperkins/blade-icon-picker 适用场景与选型建议

nickperkins/blade-icon-picker 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 15 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 05 月 08 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「laravel」「icon」「blade」「icon-picker」「livewire」「Heroicons」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 nickperkins/blade-icon-picker 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 nickperkins/blade-icon-picker 我们能提供哪些服务？

定制开发 / 二次开发

基于 nickperkins/blade-icon-picker 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 nickperkins/blade-icon-picker 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

mpclarkson/icon-scraper 21

PHP Library to get the apple-touch-icons and favicon from a website.

nswdpc/silverstripe-taxonomy-icons 0

Icon support for Silverstripe taxonomy terms

homm/hommicons 0

Craft CMS Icon Picker

grimmlink/pixeden-stroke-7-icon 0

Shim repository for https://github.com/olimsaidov/pixeden-stroke-7-icon

foxtes/alfabank-rest 1

Alfabank REST API integration

jedocodes-components/fontawesome-free 0

FontAwesome-FREE integration for Contao Open Source CMS

nickperkins/blade-icon-picker

包简介

关键字：