From b19cb0276350fc5a02a756567edb7b9db4f91177 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Mon, 16 Dec 2024 21:57:14 +0100
Subject: [PATCH] use icon instead of svg

---
 components/app/footer.vue  | 24 ++----------------------
 components/app/navbar.vue  | 31 +++----------------------------
 error.vue                  | 15 +--------------
 pages/categories/index.vue | 20 +++-----------------
 pages/search.vue           | 21 ++++-----------------
 5 files changed, 13 insertions(+), 98 deletions(-)

diff --git a/components/app/footer.vue b/components/app/footer.vue
index bf7fcd2..d42de5e 100644
--- a/components/app/footer.vue
+++ b/components/app/footer.vue
@@ -10,17 +10,7 @@
         target="_blank"
         aria-label="navigate to the source code on GitHub"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="fill-current"
-        >
-          <path
-            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-          />
-        </svg>
+        <icon name="cib:github" class="w-6 h-6" />
       </nuxt-link>
       <nuxt-link
         to="https://ruidy.nemausat.com"
@@ -28,17 +18,7 @@
         target="_blank"
         aria-label="navigate to my website"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          class="fill-current"
-        >
-          <path
-            d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 16.057v-3.057h2.994c-.059 1.143-.212 2.24-.456 3.279-.823-.12-1.674-.188-2.538-.222zm1.957 2.162c-.499 1.33-1.159 2.497-1.957 3.456v-3.62c.666.028 1.319.081 1.957.164zm-1.957-7.219v-3.015c.868-.034 1.721-.103 2.548-.224.238 1.027.389 2.111.446 3.239h-2.994zm0-5.014v-3.661c.806.969 1.471 2.15 1.971 3.496-.642.084-1.3.137-1.971.165zm2.703-3.267c1.237.496 2.354 1.228 3.29 2.146-.642.234-1.311.442-2.019.607-.344-.992-.775-1.91-1.271-2.753zm-7.241 13.56c-.244-1.039-.398-2.136-.456-3.279h2.994v3.057c-.865.034-1.714.102-2.538.222zm2.538 1.776v3.62c-.798-.959-1.458-2.126-1.957-3.456.638-.083 1.291-.136 1.957-.164zm-2.994-7.055c.057-1.128.207-2.212.446-3.239.827.121 1.68.19 2.548.224v3.015h-2.994zm1.024-5.179c.5-1.346 1.165-2.527 1.97-3.496v3.661c-.671-.028-1.329-.081-1.97-.165zm-2.005-.35c-.708-.165-1.377-.373-2.018-.607.937-.918 2.053-1.65 3.29-2.146-.496.844-.927 1.762-1.272 2.753zm-.549 1.918c-.264 1.151-.434 2.36-.492 3.611h-3.933c.165-1.658.739-3.197 1.617-4.518.88.361 1.816.67 2.808.907zm.009 9.262c-.988.236-1.92.542-2.797.9-.89-1.328-1.471-2.879-1.637-4.551h3.934c.058 1.265.231 2.488.5 3.651zm.553 1.917c.342.976.768 1.881 1.257 2.712-1.223-.49-2.326-1.211-3.256-2.115.636-.229 1.299-.435 1.999-.597zm9.924 0c.7.163 1.362.367 1.999.597-.931.903-2.034 1.625-3.257 2.116.489-.832.915-1.737 1.258-2.713zm.553-1.917c.27-1.163.442-2.386.501-3.651h3.934c-.167 1.672-.748 3.223-1.638 4.551-.877-.358-1.81-.664-2.797-.9zm.501-5.651c-.058-1.251-.229-2.46-.492-3.611.992-.237 1.929-.546 2.809-.907.877 1.321 1.451 2.86 1.616 4.518h-3.933z"
-          />
-        </svg>
+        <icon name="uil:globe" class="w-6 h-6" />
       </nuxt-link>
     </nav>
   </footer>
diff --git a/components/app/navbar.vue b/components/app/navbar.vue
index 7eb28bd..c21847c 100644
--- a/components/app/navbar.vue
+++ b/components/app/navbar.vue
@@ -48,20 +48,8 @@ if (route.path === "/search") {
           class="btn btn-ghost lg:hidden"
           arial-label="Menu button"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M4 6h16M4 12h8m-8 6h16"
-            />
-          </svg>
+          <icon name="uil:bars" class="w-6 h-6" />
+          <!-- TODO: add transition into cross on click -->
         </div>
         <ul
           tabindex="0"
@@ -87,20 +75,7 @@ if (route.path === "/search") {
         class="btn btn-ghost sm:hidden"
         aria-label="Search"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6"
-          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>
+        <icon name="uil:search" class="w-6 h-6" />
       </nuxt-link>
       <!-- Search bar for larger screens -->
       <recipe-search
diff --git a/error.vue b/error.vue
index fea2d4c..8602ee2 100644
--- a/error.vue
+++ b/error.vue
@@ -5,20 +5,7 @@
         <div class="card-body">
           <!-- Error Icon -->
           <div class="text-error text-6xl mb-4">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="mx-auto h-24 w-24"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <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>
+            <icon name="uil:exclamation-triangle" class="w-16 h-16" />
           </div>
 
           <!-- Error Details -->
diff --git a/pages/categories/index.vue b/pages/categories/index.vue
index 8950e01..4bc59f2 100644
--- a/pages/categories/index.vue
+++ b/pages/categories/index.vue
@@ -65,23 +65,9 @@ useSeoMeta({
       </div>
     </div>
 
-    <div v-else class="alert alert-info my-8 flex-col items-center">
-      <div class="flex items-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          class="stroke-current shrink-0 w-6 h-6"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <span>No categories available</span>
-      </div>
+    <div v-else role="alert" class="alert alert-info my-8 items-center flex">
+      <icon name="uil:info-circle" class="w-8 h-8" />
+      <span>No categories available</span>
     </div>
   </div>
 </template>
diff --git a/pages/search.vue b/pages/search.vue
index 5805b33..b030c83 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -68,24 +68,11 @@ watch(searchQuery, async (newQuery) => {
 
     <div
       v-else-if="searchQuery"
-      class="alert alert-info my-8 flex-col items-center"
+      role="alert"
+      class="alert alert-info my-8 items-center flex"
     >
-      <div class="flex items-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          class="stroke-current shrink-0 w-6 h-6"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <span>No recipes found for "{{ searchQuery }}"</span>
-      </div>
+      <icon name="uil:info-circle" class="w-8 h-8" />
+      <span>No recipes found for "{{ searchQuery }}"</span>
     </div>
   </div>
 </template>