From a7d12ee6300c1ff3b559f2ade129f38d4865d8d0 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Thu, 13 Mar 2025 13:50:48 +0100
Subject: [PATCH] use heroicons

---
 src/app/components/Icons/ArrowDown.vue        | 16 +++++----------
 src/app/components/Icons/ArrowInf.vue         | 19 +++++-------------
 src/app/components/Icons/ArrowLeftCircle.vue  | 18 +++++------------
 src/app/components/Icons/ArrowRightCircle.vue | 18 +++++------------
 src/app/components/Icons/ArrowUp.vue          | 16 +++++----------
 src/app/components/Icons/Chart.vue            | 15 +++++---------
 src/app/components/Icons/CheckCircle.vue      | 18 +++++------------
 src/app/components/Icons/Close.vue            | 18 +++++------------
 src/app/components/Icons/Delete.vue           | 16 +++++----------
 src/app/components/Icons/Download.vue         | 18 +++++------------
 src/app/components/Icons/Edit.vue             | 18 +++++------------
 src/app/components/Icons/Info.vue             | 18 +++++------------
 src/app/components/Icons/Language.vue         | 18 +++++------------
 src/app/components/Icons/Link.vue             | 18 +++++------------
 src/app/components/Icons/Logout.vue           | 18 +++++------------
 src/app/components/Icons/Moon.vue             | 18 +++++------------
 src/app/components/Icons/Plus.vue             | 19 +++++-------------
 src/app/components/Icons/QRCode.vue           | 18 +++++------------
 src/app/components/Icons/Stack.vue            | 19 +++++-------------
 src/app/components/Icons/Sun.vue              | 18 +++++------------
 src/app/components/Icons/Warning.vue          | 20 +++++--------------
 src/package.json                              |  1 +
 src/pnpm-lock.yaml                            | 13 +++++++++++-
 23 files changed, 118 insertions(+), 270 deletions(-)

diff --git a/src/app/components/Icons/ArrowDown.vue b/src/app/components/Icons/ArrowDown.vue
index a44f7c39..8c3cfa9d 100644
--- a/src/app/components/Icons/ArrowDown.vue
+++ b/src/app/components/Icons/ArrowDown.vue
@@ -1,13 +1,7 @@
 <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>
+  <ArrowDownIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowDownIcon from '@heroicons/vue/24/outline/esm/ArrowDownIcon';
+</script>
diff --git a/src/app/components/Icons/ArrowInf.vue b/src/app/components/Icons/ArrowInf.vue
index 0a204f4a..4369d5c5 100644
--- a/src/app/components/Icons/ArrowInf.vue
+++ b/src/app/components/Icons/ArrowInf.vue
@@ -1,16 +1,7 @@
 <template>
-  <svg
-    inline
-    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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-    />
-  </svg>
+  <ArrowPathIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowPathIcon from '@heroicons/vue/24/outline/esm/ArrowPathIcon';
+</script>
diff --git a/src/app/components/Icons/ArrowLeftCircle.vue b/src/app/components/Icons/ArrowLeftCircle.vue
index fd6d9179..f2b53895 100644
--- a/src/app/components/Icons/ArrowLeftCircle.vue
+++ b/src/app/components/Icons/ArrowLeftCircle.vue
@@ -1,15 +1,7 @@
 <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="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-    />
-  </svg>
+  <ArrowLeftCircleIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowLeftCircleIcon from '@heroicons/vue/24/outline/esm/ArrowLeftCircleIcon';
+</script>
diff --git a/src/app/components/Icons/ArrowRightCircle.vue b/src/app/components/Icons/ArrowRightCircle.vue
index f43a2afc..bee6aa60 100644
--- a/src/app/components/Icons/ArrowRightCircle.vue
+++ b/src/app/components/Icons/ArrowRightCircle.vue
@@ -1,15 +1,7 @@
 <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.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-    />
-  </svg>
+  <ArrowRightCircleIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowRightCircleIcon from '@heroicons/vue/24/outline/esm/ArrowLeftCircleIcon';
+</script>
diff --git a/src/app/components/Icons/ArrowUp.vue b/src/app/components/Icons/ArrowUp.vue
index 37a6ad52..24e52124 100644
--- a/src/app/components/Icons/ArrowUp.vue
+++ b/src/app/components/Icons/ArrowUp.vue
@@ -1,13 +1,7 @@
 <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>
+  <ArrowUpIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowUpIcon from '@heroicons/vue/24/outline/esm/ArrowUpIcon';
+</script>
diff --git a/src/app/components/Icons/Chart.vue b/src/app/components/Icons/Chart.vue
index 2c9d74e8..511cadc7 100644
--- a/src/app/components/Icons/Chart.vue
+++ b/src/app/components/Icons/Chart.vue
@@ -1,12 +1,7 @@
 <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>
+  <ChartBarIcon />
 </template>
+
+<script lang="ts" setup>
+import ChartBarIcon from '@heroicons/vue/24/outline/esm/ChartBarIcon';
+</script>
diff --git a/src/app/components/Icons/CheckCircle.vue b/src/app/components/Icons/CheckCircle.vue
index ebdc8a1a..45d1e5bf 100644
--- a/src/app/components/Icons/CheckCircle.vue
+++ b/src/app/components/Icons/CheckCircle.vue
@@ -1,15 +1,7 @@
 <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="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-    />
-  </svg>
+  <CheckCircleIcon />
 </template>
+
+<script lang="ts" setup>
+import CheckCircleIcon from '@heroicons/vue/24/outline/esm/CheckCircleIcon';
+</script>
diff --git a/src/app/components/Icons/Close.vue b/src/app/components/Icons/Close.vue
index 654ca4d4..32491ca8 100644
--- a/src/app/components/Icons/Close.vue
+++ b/src/app/components/Icons/Close.vue
@@ -1,15 +1,7 @@
 <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>
+  <XMarkIcon />
 </template>
+
+<script lang="ts" setup>
+import XMarkIcon from '@heroicons/vue/24/outline/esm/XMarkIcon';
+</script>
diff --git a/src/app/components/Icons/Delete.vue b/src/app/components/Icons/Delete.vue
index 43ad5ff2..c29b9970 100644
--- a/src/app/components/Icons/Delete.vue
+++ b/src/app/components/Icons/Delete.vue
@@ -1,13 +1,7 @@
 <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>
+  <TrashIcon />
 </template>
+
+<script lang="ts" setup>
+import TrashIcon from '@heroicons/vue/24/outline/esm/TrashIcon';
+</script>
diff --git a/src/app/components/Icons/Download.vue b/src/app/components/Icons/Download.vue
index 8fdb7643..a1d7a40e 100644
--- a/src/app/components/Icons/Download.vue
+++ b/src/app/components/Icons/Download.vue
@@ -1,15 +1,7 @@
 <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>
+  <ArrowDownTrayIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowDownTrayIcon from '@heroicons/vue/24/outline/esm/ArrowDownTrayIcon';
+</script>
diff --git a/src/app/components/Icons/Edit.vue b/src/app/components/Icons/Edit.vue
index e13e8453..2a0a89f4 100644
--- a/src/app/components/Icons/Edit.vue
+++ b/src/app/components/Icons/Edit.vue
@@ -1,15 +1,7 @@
 <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>
+  <PencilSquareIcon />
 </template>
+
+<script lang="ts" setup>
+import PencilSquareIcon from '@heroicons/vue/24/outline/esm/PencilSquareIcon';
+</script>
diff --git a/src/app/components/Icons/Info.vue b/src/app/components/Icons/Info.vue
index cedf7d45..0902ea40 100644
--- a/src/app/components/Icons/Info.vue
+++ b/src/app/components/Icons/Info.vue
@@ -1,15 +1,7 @@
 <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="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
-    />
-  </svg>
+  <InformationCircleIcon />
 </template>
+
+<script lang="ts" setup>
+import InformationCircleIcon from '@heroicons/vue/24/outline/esm/InformationCircleIcon';
+</script>
diff --git a/src/app/components/Icons/Language.vue b/src/app/components/Icons/Language.vue
index 9ddd7b3c..d29a87e4 100644
--- a/src/app/components/Icons/Language.vue
+++ b/src/app/components/Icons/Language.vue
@@ -1,15 +1,7 @@
 <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="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"
-    />
-  </svg>
+  <LanguageIcon />
 </template>
+
+<script lang="ts" setup>
+import LanguageIcon from '@heroicons/vue/24/outline/esm/LanguageIcon';
+</script>
diff --git a/src/app/components/Icons/Link.vue b/src/app/components/Icons/Link.vue
index d8395c28..2ba02eec 100644
--- a/src/app/components/Icons/Link.vue
+++ b/src/app/components/Icons/Link.vue
@@ -1,15 +1,7 @@
 <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="M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961"
-    />
-  </svg>
+  <LinkIcon />
 </template>
+
+<script lang="ts" setup>
+import LinkIcon from '@heroicons/vue/24/outline/esm/LinkIcon';
+</script>
diff --git a/src/app/components/Icons/Logout.vue b/src/app/components/Icons/Logout.vue
index 21656ea4..3a44a3c3 100644
--- a/src/app/components/Icons/Logout.vue
+++ b/src/app/components/Icons/Logout.vue
@@ -1,15 +1,7 @@
 <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>
+  <ArrowRightStartOnRectangleIcon />
 </template>
+
+<script lang="ts" setup>
+import ArrowRightStartOnRectangleIcon from '@heroicons/vue/24/outline/esm/ArrowRightStartOnRectangleIcon';
+</script>
diff --git a/src/app/components/Icons/Moon.vue b/src/app/components/Icons/Moon.vue
index 4b271121..ad36b258 100644
--- a/src/app/components/Icons/Moon.vue
+++ b/src/app/components/Icons/Moon.vue
@@ -1,15 +1,7 @@
 <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>
+  <MoonIcon />
 </template>
+
+<script lang="ts" setup>
+import MoonIcon from '@heroicons/vue/24/outline/esm/MoonIcon';
+</script>
diff --git a/src/app/components/Icons/Plus.vue b/src/app/components/Icons/Plus.vue
index e3e95b7a..b1cf1d3d 100644
--- a/src/app/components/Icons/Plus.vue
+++ b/src/app/components/Icons/Plus.vue
@@ -1,16 +1,7 @@
 <template>
-  <svg
-    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>
+  <PlusIcon />
 </template>
+
+<script lang="ts" setup>
+import PlusIcon from '@heroicons/vue/24/outline/esm/PlusIcon';
+</script>
diff --git a/src/app/components/Icons/QRCode.vue b/src/app/components/Icons/QRCode.vue
index bca1dd33..c749ba80 100644
--- a/src/app/components/Icons/QRCode.vue
+++ b/src/app/components/Icons/QRCode.vue
@@ -1,15 +1,7 @@
 <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>
+  <QrCodeIcon />
 </template>
+
+<script lang="ts" setup>
+import QrCodeIcon from '@heroicons/vue/24/outline/esm/QrCodeIcon';
+</script>
diff --git a/src/app/components/Icons/Stack.vue b/src/app/components/Icons/Stack.vue
index d26b002b..65407eab 100644
--- a/src/app/components/Icons/Stack.vue
+++ b/src/app/components/Icons/Stack.vue
@@ -1,16 +1,7 @@
 <template>
-  <svg
-    inline
-    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="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
-    />
-  </svg>
+  <ServerStackIcon />
 </template>
+
+<script lang="ts" setup>
+import ServerStackIcon from '@heroicons/vue/24/outline/esm/ServerStackIcon';
+</script>
diff --git a/src/app/components/Icons/Sun.vue b/src/app/components/Icons/Sun.vue
index eccf9d16..ea223f50 100644
--- a/src/app/components/Icons/Sun.vue
+++ b/src/app/components/Icons/Sun.vue
@@ -1,15 +1,7 @@
 <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>
+  <SunIcon />
 </template>
+
+<script lang="ts" setup>
+import SunIcon from '@heroicons/vue/24/outline/esm/SunIcon';
+</script>
diff --git a/src/app/components/Icons/Warning.vue b/src/app/components/Icons/Warning.vue
index 07a27999..1dd19ae0 100644
--- a/src/app/components/Icons/Warning.vue
+++ b/src/app/components/Icons/Warning.vue
@@ -1,17 +1,7 @@
 <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>
+  <ExclamationTriangleIcon />
 </template>
+
+<script lang="ts" setup>
+import ExclamationTriangleIcon from '@heroicons/vue/24/outline/esm/ExclamationTriangleIcon';
+</script>
diff --git a/src/package.json b/src/package.json
index 5be4f552..c8ab0cc8 100644
--- a/src/package.json
+++ b/src/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@eschricht/nuxt-color-mode": "^1.1.5",
+    "@heroicons/vue": "^2.2.0",
     "@libsql/client": "^0.14.0",
     "@nuxtjs/i18n": "^9.3.1",
     "@nuxtjs/tailwindcss": "^6.13.2",
diff --git a/src/pnpm-lock.yaml b/src/pnpm-lock.yaml
index 15f73d72..37a6bf72 100644
--- a/src/pnpm-lock.yaml
+++ b/src/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@eschricht/nuxt-color-mode':
         specifier: ^1.1.5
         version: 1.1.5(magicast@0.3.5)
+      '@heroicons/vue':
+        specifier: ^2.2.0
+        version: 2.2.0(vue@3.5.13(typescript@5.8.2))
       '@libsql/client':
         specifier: ^0.14.0
         version: 0.14.0
@@ -791,6 +794,11 @@ packages:
   '@floating-ui/vue@1.1.6':
     resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
 
+  '@heroicons/vue@2.2.0':
+    resolution: {integrity: sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==}
+    peerDependencies:
+      vue: '>= 3'
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -3403,7 +3411,6 @@ packages:
 
   libsql@0.4.7:
     resolution: {integrity: sha512-T9eIRCs6b0J1SHKYIvD8+KCJMcWZ900iZyxdnSCdqxN12Z1ijzT+jY5nrk72Jw4B0HGzms2NgpryArlJqvc3Lw==}
-    cpu: [x64, arm64, wasm32]
     os: [darwin, linux, win32]
 
   lilconfig@3.1.3:
@@ -5761,6 +5768,10 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@heroicons/vue@2.2.0(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':