Split into icons

fix avatar move class to view not icon itself fix icon format
12 months ago · cb0bfd5bc5
35 changed files with 250 additions and 312 deletions
--- a/src/components/Client/Address.vue
+++ b/src/components/Client/Address.vue
@ -30,20 +30,9 @@
        nextTick(() => clientAddressInput?.select());
      "
    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
+      <IconsEdit
        class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-        />
-      </svg>
+      />
    </span>
  </span>
 </template>
--- a/src/components/Client/Avatar.vue
+++ b/src/components/Client/Avatar.vue
@ -1,17 +1,6 @@
 <template>
  <div class="h-10 w-10 mt-2 self-start rounded-full bg-gray-50 relative">
-    <svg
-      class="w-6 m-2 text-gray-300"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-        clip-rule="evenodd"
-      />
-    </svg>
+    <IconsAvatar class="w-6 m-2 text-gray-300" />
    <img
      v-if="client.avatar"
      :src="client.avatar"
--- a/src/components/Client/Config.vue
+++ b/src/components/Client/Config.vue
@ -16,20 +16,7 @@
      }
    "
  >
-    <svg
-      class="w-5"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-      />
-    </svg>
+    <IconsDownload class="w-5" />
  </a>
 </template>

--- a/src/components/Client/Delete.vue
+++ b/src/components/Client/Delete.vue
@ -4,18 +4,7 @@
    :title="$t('deleteClient')"
    @click="modalStore.clientDelete = client"
  >
-    <svg
-      class="w-5"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-        clip-rule="evenodd"
-      />
-    </svg>
+    <IconsDelete class="w-5" />
  </button>
 </template>

--- a/src/components/Client/InlineTransfer.vue
+++ b/src/components/Client/InlineTransfer.vue
@ -6,18 +6,7 @@
    :title="$t('totalDownload') + bytes(client.transferTx)"
  >
    ·
-    <svg
-      class="align-middle h-3 inline"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
-        clip-rule="evenodd"
-      />
-    </svg>
+    <IconsArrowDown class="align-middle h-3 inline" />
    {{ bytes(client.transferTxCurrent) }}/s
  </span>

@ -28,18 +17,7 @@
    :title="$t('totalUpload') + bytes(client.transferRx)"
  >
    ·
-    <svg
-      class="align-middle h-3 inline"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
-        clip-rule="evenodd"
-      />
-    </svg>
+    <IconsArrowUp class="align-middle h-3 inline" />
    {{ bytes(client.transferRxCurrent) }}/s
  </span>
 </template>
--- a/src/components/Client/Name.vue
+++ b/src/components/Client/Name.vue
@ -35,20 +35,9 @@
        nextTick(() => clientNameInput?.select());
      "
    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
+      <IconsEdit
        class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-        />
-      </svg>
+      />
    </span>
  </div>
 </template>
--- a/src/components/Client/QRCode.vue
+++ b/src/components/Client/QRCode.vue
@ -12,20 +12,7 @@
      modalStore.qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`
    "
  >
-    <svg
-      class="w-5"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
-      />
-    </svg>
+    <IconsQRCode class="w-5" />
  </button>
 </template>

--- a/src/components/Client/Transfer.vue
+++ b/src/components/Client/Transfer.vue
@ -5,18 +5,7 @@
      class="flex gap-1"
      :title="$t('totalDownload') + bytes(client.transferTx)"
    >
-      <svg
-        class="align-middle h-3 inline mt-0.5"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
-          clip-rule="evenodd"
-        />
-      </svg>
+      <IconsArrowDown class="align-middle h-3 inline mt-0.5" />
      <div>
        <span class="text-gray-700 dark:text-neutral-200"
          >{{ bytes(client.transferTxCurrent) }}/s</span
@ -35,18 +24,7 @@
      class="flex gap-1"
      :title="$t('totalUpload') + bytes(client.transferRx)"
    >
-      <svg
-        class="align-middle h-3 inline mt-0.5"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
-          clip-rule="evenodd"
-        />
-      </svg>
+      <IconsArrowUp class="align-middle h-3 inline mt-0.5" />
      <div>
        <span class="text-gray-700 dark:text-neutral-200"
          >{{ bytes(client.transferRxCurrent) }}/s</span
--- a/src/components/Clients/BackupConfig.vue
+++ b/src/components/Clients/BackupConfig.vue
@ -4,7 +4,7 @@
    href="./api/wireguard/backup"
    :title="$t('titleBackupConfig')"
  >
-    <IconsStack />
+    <IconsStack class="w-4 md:mr-2" />
    <span class="max-md:hidden text-sm">{{ $t('backup') }}</span>
  </BaseButton>
 </template>
--- a/src/components/Clients/Empty.vue
+++ b/src/components/Clients/Empty.vue
@ -8,21 +8,7 @@
        modalStore.clientCreateName = '';
      "
    >
-      <svg
-        class="w-4 mr-2"
-        inline
-        xmlns="http://www.w3.org/2000/svg"
-        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>
+      <IconsPlus class="w-4 mr-2" />
      <span class="text-sm">{{ $t('newClient') }}</span>
    </button>
  </p>
--- a/src/components/Clients/New.vue
+++ b/src/components/Clients/New.vue
@ -5,7 +5,7 @@
      modalStore.clientCreateName = '';
    "
  >
-    <IconsPlus />
+    <IconsPlus class="w-4 md:mr-2" />
    <span class="max-md:hidden text-sm">{{ $t('new') }}</span>
  </BaseButton>
 </template>
--- a/src/components/Clients/RestoreConfig.vue
+++ b/src/components/Clients/RestoreConfig.vue
@ -1,6 +1,6 @@
 <template>
  <BaseButton as="label" for="inputRC" :title="$t('titleRestoreConfig')">
-    <IconsArrowInf />
+    <IconsArrowInf class="w-4 md:mr-2" />
    <span class="max-md:hidden text-sm">{{ $t('restore') }}</span>
    <input
      id="inputRC"
--- a/src/components/icons/ArrowDown.vue
+++ b/src/components/icons/ArrowDown.vue
@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
--- a/src/components/icons/ArrowInf.vue
+++ b/src/components/icons/ArrowInf.vue
@ -1,7 +1,6 @@
 <template>
  <svg
    inline
-    class="w-4 md:mr-2"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
--- a/src/components/icons/ArrowUp.vue
+++ b/src/components/icons/ArrowUp.vue
@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Avatar.vue
+++ b/src/components/icons/Avatar.vue
@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Chart.vue
+++ b/src/components/icons/Chart.vue
@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    fill="currentColor"
+  >
+    <path
+      d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Close.vue
+++ b/src/components/icons/Close.vue
@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M6 18L18 6M6 6l12 12"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Delete.vue
+++ b/src/components/icons/Delete.vue
@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Download.vue
+++ b/src/components/icons/Download.vue
@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Edit.vue
+++ b/src/components/icons/Edit.vue
@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/HalfMoon.vue
+++ b/src/components/icons/HalfMoon.vue
@ -0,0 +1,11 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12,2.2c-5.4,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S17.4,2.2,12,2.2z M3.8,12c0-4.5,3.7-8.2,8.2-8.2v16.5C7.5,20.2,3.8,16.5,3.8,12z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Loading.vue
+++ b/src/components/icons/Loading.vue
@ -0,0 +1,21 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Logout.vue
+++ b/src/components/icons/Logout.vue
@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Moon.vue
+++ b/src/components/icons/Moon.vue
@ -0,0 +1,15 @@
+<template>
+  <svg
+    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="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Plus.vue
+++ b/src/components/icons/Plus.vue
@ -1,6 +1,5 @@
 <template>
  <svg
-    class="w-4 md:mr-2"
    inline
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
--- a/src/components/icons/QRCode.vue
+++ b/src/components/icons/QRCode.vue
@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Stack.vue
+++ b/src/components/icons/Stack.vue
@ -1,7 +1,6 @@
 <template>
  <svg
    inline
-    class="w-4 md:mr-2"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
--- a/src/components/icons/Sun.vue
+++ b/src/components/icons/Sun.vue
@ -0,0 +1,15 @@
+<template>
+  <svg
+    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="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Warning.vue
+++ b/src/components/icons/Warning.vue
@ -0,0 +1,17 @@
+<template>
+  <!-- Heroicon name: outline/exclamation -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+    />
+  </svg>
+</template>
--- a/src/components/ui/Icon.vue
+++ b/src/components/ui/Icon.vue
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@ -24,51 +24,14 @@
          :title="$t(`theme.${theme.preference}`)"
          @click="toggleTheme"
        >
-          <svg
-            v-if="theme.preference === 'light'"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-5 h-5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
-            />
-          </svg>
-          <svg
+          <IconsSun v-if="theme.preference === 'light'" class="w-5 h-5" />
+          <IconsMoon
            v-else-if="theme.preference === 'dark'"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
            class="w-5 h-5 text-neutral-400"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
-            />
-          </svg>
-          <svg
+          />
+          <IconsHalfMoon
            v-else
-            xmlns="http://www.w3.org/2000/svg"
-            fill="currentColor"
-            viewBox="0 0 24 24"
            class="w-5 h-5 fill-gray-600 dark:fill-neutral-400"
-          >
-            <path
-              d="M12,2.2c-5.4,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S17.4,2.2,12,2.2z M3.8,12c0-4.5,3.7-8.2,8.2-8.2v16.5C7.5,20.2,3.8,16.5,3.8,12z"
-            />
-          </svg>
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"
          />
        </button>
        <!-- Show / hide charts -->
@ -84,17 +47,9 @@
            class="sr-only peer"
            @change="toggleCharts"
          />
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            fill="currentColor"
+          <IconsChart
            class="w-5 h-5 peer fill-gray-400 peer-checked:fill-gray-600 dark:fill-neutral-600 peer-checked:dark:fill-neutral-400 group-hover:dark:fill-neutral-500 transition"
-          >
-            <path
-              d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z"
-            />
-          </svg>
+          />
        </label>
        <span
          v-if="authStore.requiresPassword && authStore.authenticated"
@ -102,20 +57,7 @@
          @click="logout"
        >
          {{ $t('logout') }}
-          <svg
-            class="h-3 inline"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-            />
-          </svg>
+          <IconsLogout class="h-3 inline" />
        </span>
      </div>
    </div>
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -30,26 +30,7 @@
        v-if="clientsStore.clients === null"
        class="text-gray-200 dark:text-red-300 p-5"
      >
-        <svg
-          class="w-5 animate-spin mx-auto"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          />
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
+        <IconsLoading class="w-5 animate-spin mx-auto" />
      </div>
    </div>
  </div>
@ -64,20 +45,7 @@
          class="absolute right-4 top-4 text-gray-600 dark:text-neutral-500 hover:text-gray-800 dark:hover:text-neutral-700"
          @click="modalStore.qrcode = null"
        >
-          <svg
-            class="w-8"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
+          <IconsClose class="w-8" />
        </button>
        <img :src="modalStore.qrcode" />
      </div>
@ -136,21 +104,7 @@
              <div
                class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-800 sm:mx-0 sm:h-10 sm:w-10"
              >
-                <svg
-                  class="h-6 w-6 text-white"
-                  inline
-                  xmlns="http://www.w3.org/2000/svg"
-                  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>
+                <IconsPlus class="h-6 w-6 text-white" />
              </div>
              <div
                class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"
@ -260,22 +214,7 @@
              <div
                class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
              >
-                <!-- Heroicon name: outline/exclamation -->
-                <svg
-                  class="h-6 w-6 text-red-600"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                  />
-                </svg>
+                <IconsWarning class="h-6 w-6 text-red-600" />
              </div>
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                <h3
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@ -15,18 +15,7 @@
      <div
        class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 dark:bg-red-800 relative overflow-hidden"
      >
-        <svg
-          class="w-10 h-10 m-5 text-white dark:text-white"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-            clip-rule="evenodd"
-          />
-        </svg>
+        <IconsAvatar class="w-10 h-10 m-5 text-white dark:text-white" />
      </div>

      <input
@ -42,26 +31,7 @@
        v-if="authenticating"
        class="bg-red-800 dark:bg-red-800 w-full rounded shadow py-2 text-sm text-white dark:text-white cursor-not-allowed"
      >
-        <svg
-          class="w-5 animate-spin mx-auto"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          />
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
+        <IconsLoading class="w-5 animate-spin mx-auto" />
      </button>
      <input
        v-else
--- a/src/server/middleware/auth.ts
+++ b/src/server/middleware/auth.ts
@ -3,12 +3,12 @@ export default defineEventHandler(async (event) => {
  const session = await useWGSession(event);
  if (url.pathname === '/login') {
    if (!REQUIRES_PASSWORD || session.data.authenticated) {
-      return sendRedirect(event, '/', 302)
+      return sendRedirect(event, '/', 302);
    }
  }
  if (url.pathname === '/') {
    if (!session.data.authenticated) {
-      return sendRedirect(event, '/login', 302)
+      return sendRedirect(event, '/login', 302);
    }
  }
-});
+});