jpskill.com
🎨 デザイン コミュニティ

lucide-laravel

LaravelのBladeテンプレートでLucideアイコンを簡単に組み込み、Tailwind CSSでのスタイリングや動的な表示を可能にするSkill。

📜 元の英語説明(参考)

Lucide icon library integration for Laravel Blade templates. Use when working with Lucide icons in Laravel applications, Blade components with the x-lucide- prefix, icon styling with Tailwind CSS, dynamic icon rendering in Blade, or any Laravel view work requiring SVG icons. Keywords include lucide icons, blade icons, x-lucide, SVG icons Laravel, blade-lucide-icons, mallardduck/blade-lucide-icons.

🇯🇵 日本人クリエイター向け解説

一言でいうと

LaravelのBladeテンプレートでLucideアイコンを簡単に組み込み、Tailwind CSSでのスタイリングや動的な表示を可能にするSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Lucide Laravel

Lucide アイコンライブラリの Laravel Blade 統合です。1,666個以上の美しく一貫性のあるSVGアイコンを提供します。

インストール

composer require mallardduck/blade-lucide-icons

アイコンが表示されない場合は、ビューキャッシュをクリアしてください。

php artisan view:clear

クイックスタート

基本的な使い方

アイコンは x-lucide- プレフィックスとケバブケースの命名規則を使用します。

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

命名規則

PascalCase のアイコン名をケバブケースに変換します。

アイコン名 Blade コンポーネント
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;"/>

一般的なパターン

ナビゲーションメニュー

<nav>
    <div class="flex items-center gap-6">
        <a href="/dashboard" class="flex items-center gap-2">
            <x-lucide-layout-dashboard class="w-5 h-5"/>
            <span>Dashboard</span>
        </a>
        <a href="/products" class="flex items-center gap-2">
            <x-lucide-package class="w-5 h-5"/>
            <span>Products</span>
        </a>
        <a href="/settings" class="flex items-center gap-2">
            <x-lucide-settings class="w-5 h-5"/>
            <span>Settings</span>
        </a>
    </div>
</nav>

フォーム入力

<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>

アラート

<!-- 成功 -->
<div class="flex items-start gap-3 p-4 bg-green-50 border-l-4 border-green-500 rounded">
    <x-lucide-check-circle class="w-6 h-6 text-green-600 flex-shrink-0"/>
    <div>
        <h4 class="font-semibold text-green-800">Success!</h4>
        <p class="text-green-700">Your changes have been saved.</p>
    </div>
</div>

<!-- エラー -->
<div class="flex items-start gap-3 p-4 bg-red-50 border-l-4 border-red-500 rounded">
    <x-lucide-alert-circle class="w-6 h-6 text-red-600 flex-shrink-0"/>
    <div>
        <h4 class="font-semibold text-red-800">Error</h4>
        <p class="text-red-700">Something went wrong.</p>
    </div>
</div>

<!-- 情報 -->
<div class="flex items-start gap-3 p-4 bg-blue-50 border-l-4 border-blue-500 rounded">
    <x-lucide-info class="w-6 h-6 text-blue-600 flex-shrink-0"/>
    <p class="text-blue-700">Please review your changes before submitting.</p>
</div>

アクションボタン

<!-- aria-label 付きのアイコンのみのボタン -->
<button class="p-2 hover:bg-gray-100 rounded" aria-label="Delete">
    <x-lucide-trash class="w-5 h-5 text-red-600"/>
</button>

<!-- アイコンとテキスト付きのボタン -->
<button class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
    <x-lucide-save class="w-5 h-5"/>
    <span>Save</span>
</button>

<!-- 主要なアクション -->
<button class="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg">
    <x-lucide-plus class="w-5 h-5"/>
    <span>Add New</span>
</button>

Livewire と共に

<!-- ローディング状態 -->
<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
ヒーローアイコン w-16 h-16

意味論的なアイコンの使用

アクションを明確に表すアイコンを選択してください。

<x-lucide-trash />        <!-- 削除 -->
<x-lucide-edit />         <!-- 編集 -->
<x-lucide-download />     <!-- ダウンロード -->
<x-lucide-upload />       <!-- アップロード -->
<x-lucide-copy />         <!-- コピー -->
<x-lucide-share />        <!-- 共有 -->
<x-lucide-settings />     <!-- 設定 -->
<x-lucide-user />         <!-- ユーザー/プロフィール -->
<x-lucide-home />         <!-- ホーム -->

色のセマンティクス

<!-- 主要なアクション -->
<x-lucide-save class="w-5 h-5 text-blue-600"/>

<!-- 成功状態 -->
<x-lucide-check class="w-5 h-5 text-green-600"/>
<x-lucide-check-circle class="w-5 h-5 text-green-600"/>

<!-- 危険/警告 -->
<x-lucide-trash class="w-5 h-5 text-red-600"/>
<x-lucide-alert-triangle class="w-5 h-5 text-yellow-600"/>

<!-- 中立/二次 -->
<x-luc
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Lucide Laravel

Laravel Blade integration for the Lucide icon library - 1,666+ beautiful, consistent SVG icons.

Installation

composer require mallardduck/blade-lucide-icons

Clear view cache if icons don't appear:

php artisan view:clear

Quick Start

Basic Usage

Icons use the x-lucide- prefix with kebab-case naming:

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

Naming Convention

Convert PascalCase icon names to kebab-case:

Icon Name Blade Component
Activity <x-lucide-activity />
ShoppingCart <x-lucide-shopping-cart />
CircleCheck <x-lucide-circle-check />
ArrowRight <x-lucide-arrow-right />

Styling

Tailwind CSS

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

<!-- Responsive sizing -->
<x-lucide-heart class="w-4 h-4 md:w-6 md:h-6 text-red-500"/>

<!-- Hover effects -->
<x-lucide-star class="w-5 h-5 text-yellow-400 hover:text-yellow-500 cursor-pointer"/>

<!-- Transitions -->
<x-lucide-bell class="w-6 h-6 text-gray-700 hover:text-gray-900 transition-colors duration-200"/>

Inline Styles

<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;"/>

Common Patterns

Navigation Menus

<nav>
    <div class="flex items-center gap-6">
        <a href="/dashboard" class="flex items-center gap-2">
            <x-lucide-layout-dashboard class="w-5 h-5"/>
            <span>Dashboard</span>
        </a>
        <a href="/products" class="flex items-center gap-2">
            <x-lucide-package class="w-5 h-5"/>
            <span>Products</span>
        </a>
        <a href="/settings" class="flex items-center gap-2">
            <x-lucide-settings class="w-5 h-5"/>
            <span>Settings</span>
        </a>
    </div>
</nav>

Form Inputs

<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>

Alerts

<!-- Success -->
<div class="flex items-start gap-3 p-4 bg-green-50 border-l-4 border-green-500 rounded">
    <x-lucide-check-circle class="w-6 h-6 text-green-600 flex-shrink-0"/>
    <div>
        <h4 class="font-semibold text-green-800">Success!</h4>
        <p class="text-green-700">Your changes have been saved.</p>
    </div>
</div>

<!-- Error -->
<div class="flex items-start gap-3 p-4 bg-red-50 border-l-4 border-red-500 rounded">
    <x-lucide-alert-circle class="w-6 h-6 text-red-600 flex-shrink-0"/>
    <div>
        <h4 class="font-semibold text-red-800">Error</h4>
        <p class="text-red-700">Something went wrong.</p>
    </div>
</div>

<!-- Info -->
<div class="flex items-start gap-3 p-4 bg-blue-50 border-l-4 border-blue-500 rounded">
    <x-lucide-info class="w-6 h-6 text-blue-600 flex-shrink-0"/>
    <p class="text-blue-700">Please review your changes before submitting.</p>
</div>

Action Buttons

<!-- Icon-only button with aria-label -->
<button class="p-2 hover:bg-gray-100 rounded" aria-label="Delete">
    <x-lucide-trash class="w-5 h-5 text-red-600"/>
</button>

<!-- Button with icon and text -->
<button class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
    <x-lucide-save class="w-5 h-5"/>
    <span>Save</span>
</button>

<!-- Primary action -->
<button class="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg">
    <x-lucide-plus class="w-5 h-5"/>
    <span>Add New</span>
</button>

With Livewire

<!-- Loading states -->
<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>

<!-- Toggle icon based on state -->
<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>

Dynamic Icons

Use <x-dynamic-component> for dynamic icon names:

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

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

Common use case - icon from database:

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

Best Practices

Consistent Sizing

Context Size
Navigation w-5 h-5
Button (small) w-4 h-4
Button (medium) w-5 h-5
Feature icons w-12 h-12
Hero icons w-16 h-16

Semantic Icon Usage

Choose icons that clearly represent their action:

<x-lucide-trash />        <!-- Delete -->
<x-lucide-edit />         <!-- Edit -->
<x-lucide-download />     <!-- Download -->
<x-lucide-upload />       <!-- Upload -->
<x-lucide-copy />         <!-- Copy -->
<x-lucide-share />        <!-- Share -->
<x-lucide-settings />     <!-- Settings -->
<x-lucide-user />         <!-- User/Profile -->
<x-lucide-home />         <!-- Home -->

Color Semantics

<!-- Primary actions -->
<x-lucide-save class="w-5 h-5 text-blue-600"/>

<!-- Success states -->
<x-lucide-check class="w-5 h-5 text-green-600"/>
<x-lucide-check-circle class="w-5 h-5 text-green-600"/>

<!-- Danger/warning -->
<x-lucide-trash class="w-5 h-5 text-red-600"/>
<x-lucide-alert-triangle class="w-5 h-5 text-yellow-600"/>

<!-- Neutral/secondary -->
<x-lucide-info class="w-5 h-5 text-gray-600"/>

Accessibility

<!-- Icon-only button - always include aria-label -->
<button aria-label="Close dialog">
    <x-lucide-x class="w-6 h-6"/>
</button>

<!-- Decorative icon - hide from screen readers -->
<x-lucide-star class="w-5 h-5" aria-hidden="true"/>

<!-- Icon with visible text - accessible by default -->
<button class="flex items-center gap-2">
    <x-lucide-download class="w-5 h-5"/>
    <span>Download</span>
</button>

Icon Reference

Total Icons: 1,666 across 43 categories

Quick Reference

Category Count File Common Icons
Accessibility 30 accessibility.md accessibility, eye, ear, glasses, sun, moon
Accounts & access 133 accounts-access.md user, users, shield, key, lock, log-in, log-out
Animals 23 animals.md dog, cat, bird, bug, fish, paw-print
Arrows 209 arrows.md arrow-up, arrow-down, chevron-left, chevron-right
Brands 21 brands.md github, twitter, facebook, instagram, youtube
Buildings 25 buildings.md building, building-2, home, warehouse, store
Charts 31 charts.md bar-chart, line-chart, pie-chart, trending-up, trending-down
Coding & development 243 coding-development.md code, terminal, git-branch, git-commit, bug, cpu
Communication 54 communication.md mail, message-circle, phone, send, bell, rss
Connectivity 90 connectivity.md wifi, bluetooth, usb, cast, radio, signal
Cursors 33 cursors.md mouse-pointer, hand, move, crosshair, pointer
Design 145 design.md palette, paintbrush, eraser, pen-tool, selection
Devices 164 devices.md laptop, monitor, smartphone, tablet, keyboard, hard-drive
Emoji 28 emoji.md smile, frown, meh, heart, thumbs-up, thumbs-down
File icons 162 file-icons.md file, file-text, folder, upload, download, copy
Finance 56 finance.md dollar-sign, credit-card, wallet, banknote, coins, piggy-bank
Food & beverage 69 food-beverage.md coffee, utensils, pizza, burger, beer, cake
Gaming 148 gaming.md gamepad, gamepad-2, trophy, dice, puzzle, sword
Home 57 home.md couch, chair, bed, lamp, tv, bathtub
Layout 139 layout.md layout, panel-left, panel-right, columns, sidebar, grid
Mail 26 mail.md mail, inbox, send, at-sign, mail-open, mail-check
Mathematics 74 mathematics.md equal, plus, minus, divide, percent, infinity
Medical 42 medical.md heart-pulse, activity, pill, syringe, stethoscope, bone
Multimedia 138 multimedia.md play, pause, volume, music, image, video
Nature 23 nature.md tree, flower, leaf, sun, cloud, mountain
Navigation, Maps, POIs 84 navigation-maps-pois.md map, map-pin, compass, navigation, route, flag
Notification 39 notification.md bell, bell-ring, alert-circle, alert-triangle, info
People 3 people.md user, users, user-plus
Photography 75 photography.md camera, image, aperture, shutter, lens, film
Science 32 science.md flask, microscope, atom, beaker, magnet, dna
Seasons 5 seasons.md sun, cloud-rain, snowflake, thermometer
Security 55 security.md shield, lock, unlock, key, fingerprint, eye-off
Shapes 48 shapes.md circle, square, triangle, star, hexagon, diamond
Shopping 27 shopping.md shopping-cart, shopping-bag, credit-card, tag, package
Social 119 social.md heart, thumbs-up, share, bookmark, user-plus, link
Sports 13 sports.md football, basketball, tennis, golf, trophy, medal
Sustainability 24 sustainability.md recycle, leaf, tree, sun, wind, droplet
Text formatting 246 text-formatting.md bold, italic, underline, align-left, list, quote
Time & calendar 58 time-calendar.md calendar, clock, timer, hourglass, watch, alarm
Tools 66 tools.md hammer, wrench, screwdriver, saw, drill, measure
Transportation 64 transportation.md car, bus, train, plane, bike, ship
Travel 67 travel.md suitcase, plane, hotel, map, compass, passport
Weather 45 weather.md sun, cloud, cloud-rain, snowflake, lightning, wind

Finding Icons

  1. Browse by category: Read the category reference files for complete icon lists
  2. Search visually: Visit lucide.dev/icons
  3. Use autocomplete: IDEs with Blade autocomplete can suggest available icons

Category File Format

Each category file contains:

  • Icon count and description
  • Complete table of icons with Blade component syntax
  • Related categories for each icon
  • Usage examples specific to that category

Troubleshooting

Icons not displaying:

php artisan view:clear

Styling not applied:

  • Ensure Tailwind processes Blade files
  • Check icon names use kebab-case

Publish raw SVGs (optional):

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