From da4cc0fb03ba1d47a21c0ee6fece4bfa11916567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20Drunen?= <daniel@pixely.me>
Date: Sun, 3 Nov 2024 14:03:34 +0100
Subject: [PATCH] Replace hard-coded icons with package

---
 package-lock.json                               |  9 +++++++++
 package.json                                    |  1 +
 resources/assets/js/Layout.vue                  | 13 +++++++------
 resources/assets/js/pages/Transaction/Index.vue |  7 ++++---
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5830eddc..3ef5535a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
         "": {
             "dependencies": {
                 "@inertiajs/vue3": "^1.2.0",
+                "lucide-vue-next": "^0.454.0",
                 "vue": "^3.5.6"
             },
             "devDependencies": {
@@ -1514,6 +1515,14 @@
             "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
             "license": "MIT"
         },
+        "node_modules/lucide-vue-next": {
+            "version": "0.454.0",
+            "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.454.0.tgz",
+            "integrity": "sha512-UeThgLHm5sZyVTBIE1pcFn2jJsZTKe7AWo94lY2OMQAgYTKgPnrj1QLlSco2lU+kE7iFWl/stNLSsbxfoWCd6A==",
+            "peerDependencies": {
+                "vue": ">=3.0.1"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.30.11",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
diff --git a/package.json b/package.json
index 38aaef79..b8995cf1 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     },
     "dependencies": {
         "@inertiajs/vue3": "^1.2.0",
+        "lucide-vue-next": "^0.454.0",
         "vue": "^3.5.6"
     },
     "type": "module"
diff --git a/resources/assets/js/Layout.vue b/resources/assets/js/Layout.vue
index cb15ff19..37971b94 100644
--- a/resources/assets/js/Layout.vue
+++ b/resources/assets/js/Layout.vue
@@ -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>
diff --git a/resources/assets/js/pages/Transaction/Index.vue b/resources/assets/js/pages/Transaction/Index.vue
index d8b67aaf..b410e026 100644
--- a/resources/assets/js/pages/Transaction/Index.vue
+++ b/resources/assets/js/pages/Transaction/Index.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>