Replace hard-coded icons with package

Author: range-of-motion

package-lock.json

@@ -14,6 +14,7 @@
     },
     "dependencies": {
         "@inertiajs/vue3": "^1.2.0",
+        "lucide-vue-next": "^0.454.0",
         "vue": "^3.5.6"
     },
     "type": "module"

package.json

@@ -1,4 +1,5 @@
 <script setup>
+import { ArrowRightLeft, CirclePlus, House, LogOut } from 'lucide-vue-next';
 import { computed } from 'vue';
 import { Link, usePage } from '@inertiajs/vue3';
 
@@ -13,20 +14,20 @@ const user = computed(() => page.props.auth.user);
             <div class="mx-auto flex-1 flex items-center justify-between max-w-3xl">
                 <div class="flex space-x-10">
                     <Link class="flex items-center text-gray-500 hover:text-black" href="/dashboard">
-                        <svg class="h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
-                        <div class="ml-1 text-sm">Dashboard</div>
+                        <House :size="16" />
+                        <div class="ml-2 text-sm">Dashboard</div>
                     </Link>
                     <Link class="flex items-center text-gray-500 hover:text-black" href="/transactions">
-                        <svg class="h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>
-                        <div class="ml-1 text-sm">Transactions</div>
+                        <ArrowRightLeft :size="16" />
+                        <div class="ml-2 text-sm">Transactions</div>
                     </Link>
                 </div>
                 <div class="flex space-x-5">
                     <Link class="flex items-center text-gray-500 hover:text-black" href="/transactions/create">
-                        <svg class="h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>
+                        <CirclePlus :size="16" />
                     </Link>
                     <Link class="flex items-center text-gray-500 hover:text-black" href="/log-out">
-                        <svg class="h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
+                        <LogOut :size="16" />
                     </Link>
                 </div>
             </div>

resources/assets/js/Layout.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { Tag } from 'lucide-vue-next';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -62,10 +63,10 @@ const getTransactionsBySpan = (span) => {
 
 <template>
     <div class="my-10 mx-auto max-w-3xl">
-        <div class="mb-10">
+        <div class="mb-5">
             <div class="font-bold text-xl">Transactions</div>
         </div>
-        <div class="space-y-10">
+        <div class="space-y-5">
             <div v-for="span in spans" class="flex">
                 <div class="w-48">
                     <div class="font-semibold">{{ getMonthName(span.month) }}</div>
@@ -76,7 +77,7 @@ const getTransactionsBySpan = (span) => {
                         <div class="flex items-center justify-between" v-for="transaction in getTransactionsBySpan(span)">
                             <div class="flex-1 text-sm text-gray-500">{{ transaction.description }}</div>
                             <div v-if="transaction.tag_id" class="flex-1 flex items-center">
-                                <svg class="h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
+                                <Tag class="mr-1" :size="14" />
                                 <span class="text-sm text-gray-500">{{ transaction.tag.name }}</span>
                             </div>
                             <div class="w-20 text-right text-sm" :class="'text-' + (transaction.type === 'earning' ? 'green' : 'red') + '-600'" v-html="(transaction.type === 'earning' ? '+' : '-') + props.currency + (transaction.amount / 100).toFixed(2)"></div>