Lucide icons (#104)

* Install `lucide-vue-next `

* Remove Heroicons usage

* Remove Heroicons

Author: SebKay

bun.lockb

@@ -1,6 +1,5 @@
 {
   "devDependencies": {
-    "@heroicons/vue": "^2.2.0",
     "@inertiajs/vue3": "^2.0.3",
     "@sentry/vue": "^8.54.0",
     "@tailwindcss/forms": "^0.5.10",
@@ -20,6 +19,7 @@
   },
   "type": "module",
   "dependencies": {
-    "caniuse-lite": "^1.0.30001697"
+    "caniuse-lite": "^1.0.30001697",
+    "lucide-vue-next": "^0.479.0"
   }
 }

package.json

@@ -5,7 +5,7 @@
                 <div class="flex h-16 items-center justify-between">
                     <div class="flex items-center">
                         <Link :href="route('home')">
-                        <SparklesIcon class="h-8 w-8 shrink-0 text-brand-800" />
+                        <SparklesIcon class="size-7 shrink-0 text-brand-800" />
                         </Link>
                     </div>
 
@@ -38,13 +38,13 @@
                             class="relative inline-flex items-center justify-center rounded-md bg-brand-100 p-2 text-brand-900 hover:bg-brand-900 hover:text-white cursor-pointer"
                         >
                             <span class="sr-only">Open main menu</span>
-                            <XMarkIcon
+                            <CloseIcon
                                 v-if="mobileMenuOpen"
-                                class="block h-6 w-6"
+                                class="block size-6"
                             />
-                            <Bars3Icon
+                            <MenuIcon
                                 v-else
-                                class="block h-6 w-6"
+                                class="block size-6"
                             />
                         </button>
                     </div>
@@ -82,6 +82,12 @@
     import { ref, onMounted } from "vue";
     import { router } from '@inertiajs/vue3'
 
+    import {
+        Sparkles as SparklesIcon,
+        Menu as MenuIcon,
+        X as CloseIcon,
+    } from 'lucide-vue-next';
+
     const props = defineProps({
         menu: Array,
     });

resources/js/Components/Header.vue

@@ -9,10 +9,17 @@
         }'
         role="alert"
     >
-        <component
-            v-if="icon"
-            :is="icon"
-            class="shrink-0 inline w-6 h-6 me-3"
+        <CircleCheckIcon
+            v-if="type === 'success'"
+            class="shrink-0 inline size-5 me-3"
+        />
+        <CircleXIcon
+            v-else-if="type === 'error'"
+            class="shrink-0 inline size-5 me-3"
+        />
+        <CircleAlertIcon
+            v-else
+            class="shrink-0 inline size-5 me-3"
         />
         <p v-text="message"></p>
     </div>
@@ -22,6 +29,12 @@
     import { ref, onMounted } from 'vue';
     import { router, usePage } from "@inertiajs/vue3";
 
+    import {
+        CircleCheck as CircleCheckIcon,
+        CircleX as CircleXIcon,
+        CircleAlert as CircleAlertIcon,
+    } from 'lucide-vue-next';
+
     const page = usePage();
 
     const active = ref(false);
@@ -34,15 +47,12 @@
             let error = Object.values(page.props.errors)[0] || page.props.error;
 
             if (page.props.success) {
-                icon.value = "CheckCircleIcon";
                 type.value = "success";
                 message.value = page.props.success;
             } else if (error) {
-                icon.value = "XCircleIcon";
                 type.value = "error";
                 message.value = error;
             } else if (page.props.warning) {
-                icon.value = "ExclamationCircleIcon";
                 type.value = "warning";
                 message.value = page.props.warning;
             }

resources/js/Components/Notice.vue

@@ -5,15 +5,6 @@ import { route, ZiggyVue } from 'ziggy-js';
 import { createApp, defineAsyncComponent, h } from 'vue';
 import { createInertiaApp, Link, Head } from '@inertiajs/vue3';
 
-import {
-    Bars3Icon,
-    XMarkIcon,
-    SparklesIcon,
-    CheckCircleIcon,
-    XCircleIcon,
-    ExclamationCircleIcon,
-} from '@heroicons/vue/24/outline';
-
 import { userCan } from "@js/utilities/permissions.js";
 
 const AppLayout = defineAsyncComponent(() => import('@js/Layouts/App.vue'));
@@ -42,13 +33,6 @@ createInertiaApp({
 
         VueApp.mixin({ methods: { userCan } });
 
-        VueApp.component('Bars3Icon', Bars3Icon)
-            .component('XMarkIcon', XMarkIcon)
-            .component('SparklesIcon', SparklesIcon)
-            .component('CheckCircleIcon', CheckCircleIcon)
-            .component('XCircleIcon', XCircleIcon)
-            .component('ExclamationCircleIcon', ExclamationCircleIcon);
-
         VueApp.component('Head', Head)
             .component('Link', Link)
             .component('PageTitle', defineAsyncComponent(() => import('@js/Components/PageTitle.vue')))