feat: vue router and quality of life icons

resources/ts/components/AlertItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Alert } from "@/types";
 import { computed, ref, onBeforeMount } from "vue";
-import { CircleX, CircleAlert, CircleCheck, Info } from "@lucide/vue";
+import { CircleXIcon, CircleAlertIcon, CircleCheckIcon, InfoIcon } from "@lucide/vue";
 
 const props = defineProps<{ alert: Alert }>();
 const dismissed = ref<boolean>(false);
@@ -32,13 +32,13 @@ onBeforeMount(() => {
         :class="`alert-${alert.type}`"
         @click="onDismiss"
     >
-        <CircleX v-if="alert.type === 'error'" />
+        <circle-x-icon v-if="alert.type === 'error'" class="inline" />
         <!-- alert-error -->
-        <CircleAlert v-if="alert.type === 'warning'" />
+        <circle-alert-icon v-if="alert.type === 'warning'" class="inline" />
         <!-- alert-warning -->
-        <CircleCheck v-if="alert.type === 'success'" />
+        <circle-check-icon v-if="alert.type === 'success'" class="inline" />
         <!-- alert-success -->
-        <Info v-if="alert.type === 'info'" />
+        <info-icon v-if="alert.type === 'info'" class="inline" />
         <!-- alert-info -->
         <span>{{ alert.message }}</span>
     </div>