refactor: convert svg icons to components

.vscode/settings.json

@@ -0,0 +1 @@
+{}

resources/js/Shared/ContactCard.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { Link } from '@inertiajs/vue3';
 import { Popover as APopover } from 'ant-design-vue';
+import CalendarIcon from '@/Shared/Icons/CalendarIcon.vue';
+import PeopleIcon from '@/Shared/Icons/PeopleIcon.vue';
 
 defineProps({
   contact: Object,
@@ -33,37 +35,16 @@ defineProps({
 
             <!-- birthdate -->
             <p class="flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="me-1 h-4 w-4 text-gray-400">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-              </svg>
+
+              <CalendarIcon />
 
               <span v-if="contact.age">{{ contact.age }}</span>
               <span v-else class="text-sm italic text-gray-600">{{ $t('Unknown') }}</span>
             </p>
 
             <!-- groups -->
             <div v-if="contact.groups.length > 0" class="mt-2 flex items-start">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="me-2 h-4 w-4 text-gray-400">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
-              </svg>
+              <PeopleIcon />
 
               <ul>
                 <li v-for="group in contact.groups" :key="group.id" class="group-list-item">

resources/js/Shared/Form/ContactSelector.vue

@@ -3,6 +3,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { Link, useForm } from '@inertiajs/vue3';
 import { trans } from 'laravel-vue-i18n';
 import Errors from '@/Shared/Form/Errors.vue';
+import SearchIcon from '@/Shared/Icons/SearchIcon.vue';
 
 const props = defineProps({
   modelValue: {
@@ -174,18 +175,7 @@ const search = _.debounce(() => {
     <!-- mode to add a contact -->
     <div v-if="addContactMode">
       <div class="relative mb-3">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="absolute start-2 top-[13px] h-4 w-4 text-gray-400"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
+        <SearchIcon />
 
         <input
           ref="searchInput"

resources/js/Shared/Form/PrettyButton.vue

@@ -5,59 +5,33 @@
     type="submit">
     <span v-if="state === 'loading'"> {{ $t('Loading…') }} </span>
 
-    <!-- + icon -->
-    <svg
-      v-if="icon === 'plus' && state !== 'loading'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative me-1 inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-    </svg>
+    <PlusIcon v-if="icon === 'plus' && state !== 'loading'" />
 
-    <!-- check icon -->
-    <svg
-      v-if="icon === 'check' && state !== 'loading'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative me-1 inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-    </svg>
+    <CheckedIcon v-if="icon === 'check' && state !== 'loading'" />
 
-    <!-- minus icon -->
-    <svg
-      v-if="icon === 'minus' && state !== 'loading'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative mx-1 inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
+    <MinusIcon v-if="icon === 'minus' && state !== 'loading'" />
 
     <span v-if="state !== 'loading'">
       {{ text }}
     </span>
 
-    <!-- arrow icon -->
-    <svg
-      v-if="icon === 'arrow' && state !== 'loading'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative mx-1 inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
-    </svg>
+    <ArrowIcon :type="'right'" :size="'big'" v-if="icon === 'arrow' && state !== 'loading'" />
   </button>
 </template>
 
 <script>
+import PlusIcon from '@/Shared/Icons/PlusIcon.vue';
+import CheckedIcon from '@/Shared/Icons/CheckedIcon.vue';
+import MinusIcon from '@/Shared/Icons/MinusIcon.vue';
+import ArrowIcon from '@/Shared/Icons/ArrowIcon.vue';
+
 export default {
+  components: {
+    PlusIcon,
+    CheckedIcon,
+    MinusIcon,
+    ArrowIcon,
+  },
   props: {
     text: {
       type: String,

resources/js/Shared/Form/PrettyLink.vue

@@ -3,42 +3,12 @@
     :class="'dark:box-s relative border-zinc-900 bg-white text-sm dark:border-zinc-100 dark:bg-gray-800 dark:text-gray-100'"
     :href="href"
     preserve-scroll>
-    <!-- + icon -->
-    <svg
-      v-if="icon === 'plus'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-    </svg>
+
+    <PlusIcon v-if="icon === 'plus'" />
 
-    <!-- check icon -->
-    <svg
-      v-else-if="icon === 'check'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-    </svg>
+    <CheckedIcon v-else-if="icon === 'check'" />
 
-    <!-- door icon -->
-    <svg
-      v-else-if="icon === 'exit'"
-      class="icon relative me-1 inline h-5 w-5"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor">
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
-    </svg>
+    <DoorIcon :type="'entry'" v-else-if="icon === 'exit'" />
 
     <span>
       {{ text }}
@@ -48,10 +18,16 @@
 
 <script>
 import { Link } from '@inertiajs/vue3';
+import PlusIcon from '@/Shared/Icons/PlusIcon.vue';
+import CheckedIcon from '@/Shared/Icons/CheckedIcon.vue';
+import DoorIcon from '@/Shared/Icons/DoorIcon.vue';
 
 export default {
   components: {
     InertiaLink: Link,
+    PlusIcon,
+    CheckedIcon,
+    DoorIcon,
   },
 
   props: {

resources/js/Shared/Help.vue

@@ -2,6 +2,7 @@
 import { usePage } from '@inertiajs/vue3';
 import { Tooltip } from 'ant-design-vue';
 import { computed } from 'vue';
+import FaceIcon from '@/Shared/Icons/FaceIcon.vue';
 
 const props = defineProps({
   url: String,
@@ -26,13 +27,7 @@ const finalURL = computed(() => {
     lang="en"
     rel="noopener noreferrer">
     <Tooltip placement="topLeft" :title="$t('This link will open in a new tab')" arrow-point-at-center>
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M15.6691 7.06514L14.5891 5.72514C14.4158 5.50263 14.3087 5.23575 14.2801 4.95514L14.0901 3.25714C14.0516 2.91784 13.8993 2.60161 13.6579 2.36005C13.4165 2.1185 13.1004 1.9659 12.7611 1.92714L11.0621 1.73714C10.7621 1.70714 10.5021 1.57814 10.2821 1.40814L8.94414 0.32914C8.67755 0.116069 8.34642 0 8.00514 0C7.66386 0 7.33273 0.116069 7.06614 0.32914L5.72614 1.40914C5.50374 1.58285 5.23686 1.69029 4.95614 1.71914L3.25814 1.90914C2.55814 1.98914 2.00814 2.53914 1.92814 3.23814L1.73814 4.93714C1.70814 5.23714 1.57914 5.49714 1.40914 5.71714L0.32914 7.05414C0.116069 7.32073 0 7.65186 0 7.99314C0 8.33442 0.116069 8.66555 0.32914 8.93214L1.40914 10.2721C1.57914 10.4921 1.68914 10.7521 1.71914 11.0421L1.90914 12.7401C1.98914 13.4401 2.53914 13.9901 3.23814 14.0701L4.93714 14.2601C5.23714 14.2901 5.49714 14.4191 5.71714 14.5891L7.05614 15.6691C7.60614 16.1081 8.38514 16.1081 8.93414 15.6691L10.2741 14.5891C10.4941 14.4191 10.7541 14.3091 11.0441 14.2791L12.7421 14.0891C13.4421 14.0091 13.9921 13.4591 14.0721 12.7601L14.2621 11.0611C14.2921 10.7611 14.4211 10.5011 14.5911 10.2811L15.6711 8.94214C15.8842 8.67555 16.0003 8.34442 16.0003 8.00314C16.0003 7.66186 15.8842 7.33073 15.6711 7.06414L15.6691 7.06514ZM8.99914 11.4991C8.99914 11.7791 8.77914 11.9991 8.49914 11.9991H7.49914C7.22914 11.9991 6.99914 11.7791 6.99914 11.4991V10.4991C6.99914 10.2191 7.22914 9.99914 7.49914 9.99914H8.49914C8.77914 9.99914 8.99914 10.2191 8.99914 10.4991V11.4991ZM10.5591 6.60914C10.4991 6.77914 10.3891 6.93914 10.2591 7.07914C10.1291 7.23914 10.1191 7.26914 9.92914 7.45914C9.76914 7.62914 9.61914 7.75914 9.40914 7.90914C9.29914 7.99914 9.20914 8.09914 9.12914 8.17914C9.04914 8.25914 8.98914 8.34914 8.93914 8.44914C8.88914 8.54914 8.85914 8.63914 8.82914 8.74914C8.79914 8.85914 8.79914 8.87914 8.79914 8.99914H7.12914C7.12914 8.77914 7.12914 8.68914 7.15914 8.51914C7.18914 8.32914 7.23914 8.15914 7.29914 7.99914C7.35914 7.85914 7.43914 7.71914 7.54914 7.57914C7.65914 7.44914 7.77914 7.32914 7.95914 7.19914C8.22914 7.00914 8.31914 6.89914 8.43914 6.67914C8.55914 6.45914 8.63914 6.29914 8.63914 6.08914C8.63914 5.81914 8.57914 5.63914 8.43914 5.50914C8.30914 5.37914 8.12914 5.31914 7.85914 5.31914C7.76914 5.31914 7.66914 5.33914 7.55914 5.36914C7.44914 5.39914 7.38914 5.45914 7.30914 5.52914C7.22914 5.59914 7.16914 5.63914 7.10914 5.72914C7.04555 5.80813 7.01348 5.90789 7.01914 6.00914H5.01914C5.01914 5.62914 5.14914 5.44914 5.28914 5.17914C5.44914 4.90914 5.64914 4.67914 5.89914 4.50914C6.14914 4.33914 6.44914 4.20914 6.77914 4.12914C7.10914 4.04914 7.47914 3.99914 7.86914 3.99914C8.30914 3.99914 8.69914 4.04914 9.03914 4.12914C9.37914 4.21914 9.66914 4.34914 9.91914 4.51914C10.1491 4.68914 10.3291 4.89914 10.4691 5.14914C10.5991 5.39914 10.6591 5.69914 10.6591 6.02914C10.6591 6.24914 10.6591 6.44914 10.5791 6.61914L10.5591 6.60914Z"
-          fill="#96A3BD" />
-      </svg>
+      <FaceIcon :type="'question'" />
     </Tooltip>
   </a>
 </template>

resources/js/Shared/HoverMenu.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { Dropdown, Menu, MenuItem } from 'ant-design-vue';
+import MenuIcon from '@/Shared/Icons/MenuIcon.vue';
 
 defineEmits(['edit', 'delete']);
 defineProps({
@@ -11,13 +12,7 @@ defineProps({
 <template>
   <Dropdown>
     <a class="ant-dropdown-link cursor-pointer" @click.prevent>
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-      </svg>
+      <MenuIcon />
     </a>
     <template #overlay>
       <Menu :theme="isDark() ? 'dark' : 'light'">

resources/js/Shared/Icons/ArrowIcon.vue

@@ -0,0 +1,60 @@
+<script setup>
+    defineProps({
+        type: { type: String, default: "right" },
+        size: { type: String, default: "small" },
+    });
+</script>
+
+<template>
+
+    <svg
+      v-if="type == 'right' && size == 'small'"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="h-6 w-6 text-gray-600">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
+    </svg>
+
+    <svg
+      v-if="type == 'right' && size == 'big'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+    </svg>
+
+    <!-- replace it with left icon svg... -->
+    <svg
+      v-if="type == 'left' && size == 'small'"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="h-6 w-6 text-gray-600">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
+    </svg>
+
+    <svg
+      v-if="type == 'left' && size == 'big'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+    </svg>
+</template>

resources/js/Shared/Icons/BadgeIcon.vue

@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
+    </svg>
+</template>

resources/js/Shared/Icons/BallIcon.vue

@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
+    </svg>
+</template>

resources/js/Shared/Icons/CalendarIcon.vue

@@ -0,0 +1,35 @@
+<script setup>
+    defineProps({
+        type: { type: String, default: "filled" },
+    });
+</script>
+
+<template>
+    <svg
+      v-if="type == 'filled'"
+      class="ms-2 h-4 w-4"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
+    </svg>
+
+    <svg
+      v-else
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="me-1 h-4 w-4 text-gray-400">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+    </svg>
+</template>