安裝 wireui/wireui 與 Icon 測試

composer.json

@@ -11,7 +11,8 @@
         "laravel/tinker": "^2.10.1",
         "livewire/livewire": "^3.4",
         "livewire/volt": "^1.7.0",
-        "spatie/laravel-permission": "^6.17"
+        "spatie/laravel-permission": "^6.17",
+        "wireui/wireui": "^2.4"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "50b5ae6f549fbdc743dd6abf2feebb9f",
+    "content-hash": "288b2a039ced0d4d9f18d54dac1710ec",
     "packages": [
         {
             "name": "brick/math",
@@ -6015,6 +6015,135 @@
                 "source": "https://github.com/webmozarts/assert/tree/1.11.0"
             },
             "time": "2022-06-03T18:03:27+00:00"
+        },
+        {
+            "name": "wireui/heroicons",
+            "version": "v2.9.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/wireui/heroicons.git",
+                "reference": "ccd2ab94293d6f231271c0847c1db34305313c6f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/wireui/heroicons/zipball/ccd2ab94293d6f231271c0847c1db34305313c6f",
+                "reference": "ccd2ab94293d6f231271c0847c1db34305313c6f",
+                "shasum": ""
+            },
+            "require": {
+                "laravel/framework": "^9.16|^10.0|^11.0|^12.0",
+                "php": "^8.1|^8.2|^8.3|^8.4"
+            },
+            "require-dev": {
+                "larastan/larastan": "^3.0",
+                "laravel/pint": "^1.6",
+                "orchestra/testbench": "^10.0",
+                "pestphp/pest": "^3.0"
+            },
+            "type": "library",
+            "extra": {
+                "aliases": [],
+                "laravel": {
+                    "providers": [
+                        "WireUi\\Heroicons\\HeroiconsServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "WireUi\\Heroicons\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Pedro Oliveira",
+                    "email": "pedrolivertwd@gmail.com"
+                }
+            ],
+            "description": "The Tailwind Heroicons for laravel blade by WireUI",
+            "keywords": [
+                "blade components",
+                "blade heroicons",
+                "laravel components",
+                "livewire icons",
+                "livewire icons components",
+                "wireui"
+            ],
+            "support": {
+                "issues": "https://github.com/wireui/heroicons/issues",
+                "source": "https://github.com/wireui/heroicons/tree/v2.9.0"
+            },
+            "time": "2025-03-02T22:06:22+00:00"
+        },
+        {
+            "name": "wireui/wireui",
+            "version": "v2.4.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/wireui/wireui.git",
+                "reference": "fad14ea639322432fa24bb7e61f644a17b503582"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/wireui/wireui/zipball/fad14ea639322432fa24bb7e61f644a17b503582",
+                "reference": "fad14ea639322432fa24bb7e61f644a17b503582",
+                "shasum": ""
+            },
+            "require": {
+                "laravel/framework": "^10.0|^11.0|^12.0",
+                "php": "^8.2|^8.3|^8.4",
+                "wireui/heroicons": "^2.8"
+            },
+            "require-dev": {
+                "laravel/pint": "^1.19",
+                "livewire/livewire": "^3.6",
+                "orchestra/testbench": "^10.0",
+                "orchestra/testbench-dusk": "^10.0",
+                "pestphp/pest": "^3.0",
+                "pestphp/pest-plugin-laravel": "^3.0",
+                "pestphp/pest-plugin-livewire": "^3.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "aliases": [],
+                    "providers": [
+                        "WireUi\\ServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "WireUi\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Pedro Oliveira",
+                    "email": "pedrolivertwd@gmail.com"
+                }
+            ],
+            "description": "TallStack components",
+            "keywords": [
+                "blade components",
+                "laravel components",
+                "livewire components",
+                "livewire-ui",
+                "wireui"
+            ],
+            "support": {
+                "issues": "https://github.com/wireui/wireui/issues",
+                "source": "https://github.com/wireui/wireui/tree/v2.4.2"
+            },
+            "time": "2025-04-16T17:33:35+00:00"
         }
     ],
     "packages-dev": [

config/wireui.php

@@ -0,0 +1,126 @@
+<?php
+
+use WireUi\Components;
+use WireUi\Enum\Packs;
+use WireUi\WireUiConfig as Config;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Prefix
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the prefix for WireUI components. Examples:
+    |
+    | 'wireui-' => 'x-wireui-button'
+    | 'wireui:' => 'x-wireui:button'
+    |
+     */
+
+    'prefix' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global Styles
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the global styles for WireUI components.
+    |
+     */
+
+    'style' => [
+        'shadow' => Packs\Shadow::BASE,
+        'rounded' => Packs\Rounded::MD,
+        'color' => Packs\Color::PRIMARY,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Configuration
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default configuration for WireUI components.
+    |
+     */
+
+    'alert' => Config::alert(),
+
+    'avatar' => Config::avatar(),
+
+    'badge' => Config::badge(),
+
+    'mini-badge' => Config::miniBadge(),
+
+    'button' => Config::button(),
+
+    'mini-button' => Config::miniButton(),
+
+    'card' => Config::card(),
+
+    'checkbox' => Config::checkbox(),
+
+    'color-picker' => Config::wrapper(),
+
+    'datetime-picker' => Config::dateTimePicker(),
+
+    'dialog' => Config::dialog(),
+
+    'dropdown' => Config::dropdown(),
+
+    'icon' => Config::icon(),
+
+    'input' => Config::wrapper(),
+
+    'currency' => Config::wrapper(),
+
+    'maskable' => Config::wrapper(),
+
+    'number' => Config::wrapper(),
+
+    'password' => Config::wrapper(),
+
+    'phone' => Config::wrapper(),
+
+    'link' => Config::link(),
+
+    'modal' => Config::modal(),
+
+    'modal-card' => Config::modal(),
+
+    'native-select' => Config::wrapper(),
+
+    'notifications' => Config::notifications(),
+
+    'radio' => Config::radio(),
+
+    'select' => Config::wrapper(),
+
+    'textarea' => Config::wrapper(),
+
+    'time-picker' => Config::timePicker(),
+
+    'time-selector' => Config::timeSelector(),
+
+    'toggle' => Config::toggle(),
+
+    /*
+    |--------------------------------------------------------------------------
+    | WireUI Components
+    |--------------------------------------------------------------------------
+    |
+    | Change the alias to call the component with a different name.
+    | Extend the component and replace your changes in this file.
+    |
+     */
+
+    'components' => Config::defaultComponents([
+        // 'button' => [
+        //     'alias' => 'new-button',
+        // ],
+        // 'mini-button' => [
+        //     'class' => Components\Button\Mini::class,
+        //     'alias' => 'new-mini-button',
+        // ],
+    ]),
+];

resources/views/layouts/admin.blade.php

@@ -7,23 +7,14 @@
 
         <title>{{ config('app.name', 'Laravel Admin') }}</title>
 
-        <!-- 字型 & CSS -->
+        <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
 
-        <!-----------------------------------------------------------
-        -- animate.min.css by Daniel Eden (https://animate.style)
-        -- is required for the animation of notifications and slide out panels
-        -- you can ignore this step if you already have this file in your project
-        --------------------------------------------------------------------------->
-
-        <link href="{{ asset('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />
-        <link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />
-        <script src="{{ asset('vendor/bladewind/js/helpers.js') }}"></script>
-
         <!-- Scripts -->
         @vite(['resources/css/app.css', 'resources/js/app.js'])
         @livewireStyles
+        <wireui:scripts />
     </head>
     <body class="bg-gray-100 text-gray-800">
         @auth

resources/views/livewire/layout/admin/sidebar.blade.php

@@ -16,9 +16,7 @@
             @if (!$menu['permission'] || Auth::user()->can($menu['permission']))
                 <a href="{{ route($menu['route']) }}"
                    class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 {{ request()->routeIs($menu['route']) ? 'bg-gray-100 font-semibold' : '' }}">
-                   <span class="material-icons-outlined mr-2">
+                   <x-icon name="{{ $menu['icon'] }}" class="w-5 h-5" />
-                        {{ $menu['icon'] }}
-                   </span>
                     {{ $menu['label'] }}
                     
                 </a>

tailwind.config.js

@@ -3,10 +3,17 @@ import forms from '@tailwindcss/forms';
 
 /** @type {import('tailwindcss').Config} */
 export default {
+    presets: [
+        require("./vendor/wireui/wireui/tailwind.config.js")
+    ],
     content: [
         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
+        "./vendor/wireui/wireui/src/*.php",
+        "./vendor/wireui/wireui/ts/**/*.ts",
+        "./vendor/wireui/wireui/src/WireUi/**/*.php",
+        "./vendor/wireui/wireui/src/Components/**/*.php",
     ],
 
     theme: {