lucide-laravel

用途

lucide-laravel 用于在 Laravel 应用的 Blade 模板中集成 Lucide 图标库，提供 1,666 个风格一致、可直接在模板中调用的 SVG 图标。当你需要在 Laravel 中配合 Blade 组件使用 Lucide 图标时，可使用该方案。

安装

通过 Composer 安装：

composer require mallardduck/blade-lucide-icons

如果图标未显示，清除视图缓存：

php artisan view:clear

（可选）发布原始 SVG：

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

主要能力与使用方式

基本用法

图标使用 x-lucide- 前缀并以 kebab-case 命名：

<x-lucide-activity />
<x-lucide-heart />
<x-lucide-shopping-cart />
<x-lucide-circle-check />

命名约定为将 PascalCase 图标名转换为 kebab-case：

Activity → <x-lucide-activity />
ShoppingCart → <x-lucide-shopping-cart />
CircleCheck → <x-lucide-circle-check />
ArrowRight → <x-lucide-arrow-right />

样式控制

可通过 Tailwind CSS 类设置尺寸、颜色、响应式尺寸、悬停效果与过渡，例如：

<x-lucide-album class="w-6 h-6 text-gray-500"/>
<x-lucide-heart class="w-4 h-4 md:w-6 md:h-6 text-red-500"/>
<x-lucide-star class="w-5 h-5 text-yellow-400 hover:text-yellow-500 cursor-pointer"/>
<x-lucide-bell class="w-6 h-6 text-gray-700 hover:text-gray-900 transition-colors duration-200"/>

也可使用内联样式：

<x-lucide-anchor style="color: #555"/>
<x-lucide-heart style="color: #ff0000; width: 48px; height: 48px;"/>
<x-lucide-activity style="color: var(--primary-color); stroke-width: 1.5;"/>

常见模式

资料给出了导航菜单、表单输入框、提示条（成功/错误/信息）、操作按钮（纯图标按钮、图标加文字按钮、主操作按钮）等示例代码。

在表单输入框中带搜索图标的写法：

<div class="relative">
    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <x-lucide-search class="w-5 h-5 text-gray-400"/>
    </div>
    <input type="text" class="pl-10 w-full border rounded-lg" placeholder="Search..."/>
</div>

与 Livewire 配合

支持加载状态与基于状态的图标切换，例如使用 wire:loading.class 添加旋转动画：

<button wire:click="refresh" class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg">
    <x-lucide-refresh-cw class="w-5 h-5" wire:loading.class="animate-spin"/>
    <span wire:loading.remove>Refresh Data</span>
    <span wire:loading>Loading...</span>
</button>

<div class="flex items-center gap-2">
    @if($isFavorited)
        <x-lucide-heart class="w-5 h-5 text-red-500 fill-current" wire:click="unfavorite"/>
    @else
        <x-lucide-heart class="w-5 h-5 text-gray-400" wire:click="favorite"/>
    @endif
</div>

动态图标

使用 <x-dynamic-component> 处理动态图标名：

@php
    $iconName = 'heart';
    $iconComponent = 'lucide-' . $iconName;
@endphp

<x-dynamic-component :component="$iconComponent" class="w-6 h-6" />

从数据库读取图标的常见用法：

<x-dynamic-component
    :component="'lucide-' . $menu->icon"
    class="w-5 h-5"
/>

适用场景与最佳实践

资料给出了不同上下文下的推荐尺寸：导航 w-5 h-5；按钮（小）w-4 h-4；按钮（中）w-5 h-5；功能图标 w-12 h-12；Hero 图标 w-16 h-16。

语义化图标使用上，建议选择能明确代表其动作的图标，例如 trash 表示删除、edit 表示编辑、download 表示下载、upload 表示上传、copy 表示复制、share 表示分享、settings 表示设置、user 表示用户/个人资料、home 表示首页。

颜色语义方面：主操作使用 text-blue-600；成功状态使用 text-green-600；危险/警告使用 text-red-600 或 text-yellow-600；中性/次要使用 text-gray-600。

无障碍方面：纯图标按钮应始终包含 aria-label；装饰性图标可使用 aria-hidden="true" 对屏幕阅读器隐藏；带可见文字的图标按钮默认即可访问。

图标参考

总计 1,666 个图标，分布在 43 个分类中。资料列出了各分类的数量与文件，例如：无障碍 30 个、账户与访问 133 个、动物 23 个、箭头 209 个、品牌 21 个、建筑 25 个、图表 31 个、编码与开发 243 个、通信 54 个、连接 90 个、光标 33 个、设计 145 个、设备 164 个、表情 28 个、文件图标 162 个、金融 56 个、食品与饮料 69 个、游戏 148 个、家居 57 个、布局 139 个、邮件 26 个、数学 74 个、医疗 42 个、多媒体 138 个、自然 23 个、导航地图与兴趣点 84 个、通知 39 个、人物 3 个、摄影 75 个、科学 32 个、季节 5 个、安全 55 个、形状 48 个、购物 27 个、社交 119 个、运动 13 个、可持续性 24 个、文本格式化 246 个、时间与日历 58 个、工具 66 个、交通 64 个、旅行 67 个、天气 45 个。每个分类文件包含图标数量与描述、完整的图标表及 Blade 组件语法、各图标的相关分类与使用示例。

查找图标的方式包括：按分类阅读分类参考文件获取完整图标列表；访问 lucide.dev/icons 进行可视化搜索；使用支持 Blade 自动补全的 IDE 获取图标建议。

限制

资料未提供该方案的价格、收费模式、版本号、平台兼容范围（如具体 Laravel 版本要求）以及性能相关信息。若图标未显示，可执行 php artisan view:clear；若样式未生效，需确保 Tailwind 处理 Blade 文件并检查图标名是否使用 kebab-case。