From 24ae5dc3e206b198e8513717eae57ef935457f5e Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Fri, 22 Mar 2024 04:43:44 +0400
Subject: [PATCH] Replace SVG icons with Icon component throughout the
 application

A centralized Icon component is now used to manage all SVG icons, improving code readability and maintainability. It also replaced manually defined SVG paths in various components including cards, buttons, and sections.
---
 .../sections/pricing/PricingSection.astro     | 25 ++--------
 src/components/ui/blocks/AccordionItem.astro  | 35 ++++----------
 src/components/ui/blocks/StatsGrid.astro      | 21 ++-------
 src/components/ui/buttons/Bookmark.astro      | 19 ++------
 src/components/ui/buttons/Btn404.astro        | 18 +------
 src/components/ui/buttons/GithubBtn.astro     | 17 +------
 src/components/ui/buttons/PrimaryCTA.astro    | 18 +------
 src/components/ui/buttons/SocialShare.astro   | 47 +++----------------
 src/components/ui/cards/CardInsight.astro     | 14 +-----
 src/components/ui/cards/CardSmall.astro       |  8 +---
 src/components/ui/cards/CardWide.astro        |  8 +---
 11 files changed, 37 insertions(+), 193 deletions(-)

diff --git a/src/components/sections/pricing/PricingSection.astro b/src/components/sections/pricing/PricingSection.astro
index 5eb1f96..8e66c78 100644
--- a/src/components/sections/pricing/PricingSection.astro
+++ b/src/components/sections/pricing/PricingSection.astro
@@ -1,6 +1,7 @@
 ---
 // Import SecondaryCTA component for use in this module
 import SecondaryCTA from "../../ui/buttons/SecondaryCTA.astro";
+import Icon from "../../ui/icons/Icon.astro";
 
 // Set heading and sub-heading for the pricing section
 const title: string = "Simple, Transparent Pricing";
@@ -94,17 +95,7 @@ const professionalToolbox: Product = {
         {
           starterKit.features.map((feature) => (
             <li class="flex items-center gap-1.5">
-              <svg
-                class="h-5 w-5 shrink-0"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                  clip-rule="evenodd"
-                />
-              </svg>
+              <Icon name="checkCircle" />
 
               <span>{feature}</span>
             </li>
@@ -154,17 +145,7 @@ const professionalToolbox: Product = {
         {
           professionalToolbox.features.map((feature) => (
             <li class="flex items-center gap-1.5">
-              <svg
-                class="h-5 w-5 shrink-0"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                  clip-rule="evenodd"
-                />
-              </svg>
+              <Icon name="checkCircle" />
 
               <span>{feature}</span>
             </li>
diff --git a/src/components/ui/blocks/AccordionItem.astro b/src/components/ui/blocks/AccordionItem.astro
index e94dac2..04d04ec 100644
--- a/src/components/ui/blocks/AccordionItem.astro
+++ b/src/components/ui/blocks/AccordionItem.astro
@@ -1,12 +1,13 @@
 ---
+import Icon from "../icons/Icon.astro";
 // Define props from Astro
-const { id, collapseId, heading, content, first } = Astro.props;
+const { id, collapseId, question, answer, first } = Astro.props;
 // Define TypeScript interface for props
 interface Props {
   id: string;
   collapseId: string;
-  heading: string;
-  content: string;
+  question: string;
+  answer: string;
   first?: boolean;
 }
 // Define class names for the accordion and its content
@@ -27,32 +28,12 @@ function getAccordionClass(first: boolean = false) {
     class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 text-balance rounded-lg pb-3 text-start font-bold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:ring-zinc-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
     aria-controls={collapseId}
   >
-    {heading}
+    {question}
     <!-- SVG Icon that is shown when the accordion is NOT active -->
-    <svg
-      class="block h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:hidden dark:text-neutral-400"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg
-    >
+    <Icon name="accordionNotActive" />
 
     <!-- SVG Icon that is shown when the accordion is active -->
-    <svg
-      class="hidden h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:block dark:text-neutral-400"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg
-    >
+    <Icon name="accordionActive" />
   </button>
   <!-- The collapsible content of the accordion -->
   <div
@@ -62,7 +43,7 @@ function getAccordionClass(first: boolean = false) {
   >
     <!-- The content paragraph -->
     <p class="text-pretty text-neutral-600 dark:text-neutral-400">
-      {content}
+      {answer}
     </p>
   </div>
 </div>
diff --git a/src/components/ui/blocks/StatsGrid.astro b/src/components/ui/blocks/StatsGrid.astro
index 4fb12ff..c8446ff 100644
--- a/src/components/ui/blocks/StatsGrid.astro
+++ b/src/components/ui/blocks/StatsGrid.astro
@@ -1,4 +1,6 @@
 ---
+import Icon from "../icons/Icon.astro";
+
 const { count, description, index } = Astro.props;
 
 interface Props {
@@ -12,24 +14,7 @@ interface Props {
   <div
     class="mb-2 flex items-end gap-x-2 text-3xl font-bold text-neutral-800 dark:text-neutral-200 sm:text-5xl"
   >
-    {
-      index === 1 || index === 2 ? (
-        <svg
-          class="h-5 w-5 flex-shrink-0 text-[#fa5a15] dark:text-[#fb713b]"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="m5 12 7-7 7 7" />
-          <path d="M12 19V5" />
-        </svg>
-      ) : null
-    }
+    {index === 1 || index === 2 ? <Icon name="arrowUp" /> : null}
     {count}
   </div>
   <p class="text-sm text-neutral-600 dark:text-neutral-400 sm:text-base">
diff --git a/src/components/ui/buttons/Bookmark.astro b/src/components/ui/buttons/Bookmark.astro
index 0c8ae2c..5265406 100644
--- a/src/components/ui/buttons/Bookmark.astro
+++ b/src/components/ui/buttons/Bookmark.astro
@@ -1,22 +1,13 @@
+---
+import Icon from "../icons/Icon.astro";
+---
+
 <button
   type="button"
   class="focus-visible:ring-secondary group inline-flex items-center rounded-lg p-2.5 text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-100 focus:outline-none focus-visible:outline-none focus-visible:ring-1 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700"
   data-bookmark-button="bookmark-button"
 >
-  <svg
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="h-6 w-6 fill-none transition duration-300"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="fill-current text-neutral-500 transition duration-300 group-hover:text-red-400 group-hover:dark:text-red-400"
-      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
-    ></path>
-  </svg>
+  <Icon name="bookmark" />
 </button>
 
 <script>
diff --git a/src/components/ui/buttons/Btn404.astro b/src/components/ui/buttons/Btn404.astro
index 8026ef4..a576620 100644
--- a/src/components/ui/buttons/Btn404.astro
+++ b/src/components/ui/buttons/Btn404.astro
@@ -1,4 +1,5 @@
 ---
+import Icon from "../icons/Icon.astro";
 // Destructure the properties from Astro.props
 const { title, id, noArrow } = Astro.props;
 // Define TypeScript interface for the properties
@@ -16,20 +17,6 @@ const bgColorClasses =
 const disableClasses = "disabled:pointer-events-none disabled:opacity-50";
 const fontSizeClasses = "2xl:text-base";
 const ringClasses = "dark:ring-zinc-200";
-// SVG for an arrow icon
-const arrowSVG = `<svg
-                    class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-            >
-                <path d="m9 18 6-6-6-6"></path>
-            </svg>`;
 ---
 
 <!-- Button with dynamic title, id, and optional arrow -->
@@ -38,7 +25,6 @@ const arrowSVG = `<svg
   id={id}
 >
   {title}
-  <!-- About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments -->
   <!-- Display the arrow based on the 'noArrow' property -->
-  {noArrow ? null : <Fragment set:html={arrowSVG} />}
+  {noArrow ? null : <Icon name="arrowRight" />}
 </button>
diff --git a/src/components/ui/buttons/GithubBtn.astro b/src/components/ui/buttons/GithubBtn.astro
index 3cb2dba..893fa4f 100644
--- a/src/components/ui/buttons/GithubBtn.astro
+++ b/src/components/ui/buttons/GithubBtn.astro
@@ -1,4 +1,5 @@
 ---
+import Icon from "../icons/Icon.astro";
 const { title = "Continue with Github", url } = Astro.props;
 
 interface Props {
@@ -13,18 +14,6 @@ const bgColorClasses = "bg-yellow-400 dark:focus:outline-none";
 const hoverClasses = "hover:shadow-2xl hover:shadow-yellow-500";
 const fontSizeClasses = "2xl:text-base";
 const ringClasses = "dark:ring-zinc-200";
-const githubSVG = `<svg
-    class="w-4.5 h-4.5 tarnsition flex-shrink-0 text-neutral-700 duration-300 group-hover:-translate-y-1"
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="currentColor"
-    viewBox="0 0 16 16"
-  >
-    <path
-      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-    ></path>
-  </svg>`;
 ---
 
 <a
@@ -33,8 +22,6 @@ const githubSVG = `<svg
   target="_blank"
   rel="noopener noreferrer"
 >
-  <!-- About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments -->
-
-  <Fragment set:html={githubSVG} />
+  <Icon name="github" />
   {title}
 </a>
diff --git a/src/components/ui/buttons/PrimaryCTA.astro b/src/components/ui/buttons/PrimaryCTA.astro
index 7bd30da..0403261 100644
--- a/src/components/ui/buttons/PrimaryCTA.astro
+++ b/src/components/ui/buttons/PrimaryCTA.astro
@@ -1,4 +1,5 @@
 ---
+import Icon from "../icons/Icon.astro";
 // Destructure the properties from Astro.props
 const { title, url, noArrow } = Astro.props;
 // Define TypeScript interface for the properties
@@ -16,20 +17,6 @@ const bgColorClasses =
 const disableClasses = "disabled:pointer-events-none disabled:opacity-50";
 const fontSizeClasses = "2xl:text-base";
 const ringClasses = "dark:ring-zinc-200";
-// SVG for an arrow icon
-const arrowSVG = `<svg
-                    class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-            >
-                <path d="m9 18 6-6-6-6"></path>
-            </svg>`;
 ---
 
 <!-- Link styled as a button, with dynamic title, URL, and optional arrow -->
@@ -39,7 +26,6 @@ const arrowSVG = `<svg
 >
   {title}
   <!-- Display the arrow based on the 'noArrow' property -->
-  <!-- About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments -->
 
-  {noArrow ? null : <Fragment set:html={arrowSVG} />}
+  {noArrow ? null : <Icon name="arrowRight" />}
 </a>
diff --git a/src/components/ui/buttons/SocialShare.astro b/src/components/ui/buttons/SocialShare.astro
index 81eeb2f..072307e 100644
--- a/src/components/ui/buttons/SocialShare.astro
+++ b/src/components/ui/buttons/SocialShare.astro
@@ -1,4 +1,5 @@
 ---
+import Icon from "../icons/Icon.astro";
 // Destructure the properties from Astro.props
 const { pageTitle } = Astro.props;
 
@@ -17,41 +18,17 @@ const socialPlatforms: SocialPlatform[] = [
   {
     name: "Facebook",
     url: `https://www.facebook.com/share.php?u=${Astro.url}&title=${pageTitle}`,
-    svg: `<svg
-          role="img"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          class="size-4 flex-shrink-0 fill-current"
-          ><title>Facebook</title><path
-            d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
-          ></path></svg
-        >`,
+    svg: "facebook",
   },
   {
     name: "X",
     url: `https://twitter.com/home/?status=${pageTitle}${Astro.url}`,
-    svg: `<svg
-          role="img"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          class="size-4 flex-shrink-0 fill-current"
-          ><title>X</title><path
-            d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
-          ></path></svg
-        >`,
+    svg: "x",
   },
   {
     name: "LinkedIn",
     url: `https://www.linkedin.com/shareArticle?mini=true&url=${Astro.url}&title=${pageTitle}`,
-    svg: `<svg
-          role="img"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          class="size-4 flex-shrink-0 fill-current"
-          ><title>LinkedIn</title><path
-            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
-          ></path></svg
-        >`,
+    svg: "linkedIn",
   },
 ];
 ---
@@ -64,19 +41,7 @@ const socialPlatforms: SocialPlatform[] = [
     type="button"
     class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-100 hover:text-neutral-700 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:outline-none"
   >
-    <svg
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-      class="h-4 w-4 group-hover:text-neutral-700"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"
-      ></path>
-    </svg>
+    <Icon name="share" />
 
     Share
   </button>
@@ -92,7 +57,7 @@ const socialPlatforms: SocialPlatform[] = [
             class="flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100  focus:outline-none dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 "
             href={platform.url}
           >
-            <Fragment set:html={platform.svg} />
+            <Icon name={platform.svg} />
             Share on {platform.name}
           </a>
         ))
diff --git a/src/components/ui/cards/CardInsight.astro b/src/components/ui/cards/CardInsight.astro
index dc99c84..3a8fff7 100644
--- a/src/components/ui/cards/CardInsight.astro
+++ b/src/components/ui/cards/CardInsight.astro
@@ -1,6 +1,7 @@
 ---
 // Import necessary modules and utilities
 import { Image } from "astro:assets";
+import Icon from "../icons/Icon.astro";
 import type { CollectionEntry } from "astro:content";
 
 const { insightEntry } = Astro.props;
@@ -42,18 +43,7 @@ interface Props {
       class="mt-5 inline-flex items-center gap-x-1 font-medium text-[#fa5a15] decoration-2 group-hover:underline dark:text-[#fb713b]"
     >
       Read more
-      <svg
-        class="size-4 flex-shrink-0"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
-      >
+      <Icon name="arrowRightStatic" />
     </p>
   </div>
 </a>
diff --git a/src/components/ui/cards/CardSmall.astro b/src/components/ui/cards/CardSmall.astro
index 2670701..76afc3a 100644
--- a/src/components/ui/cards/CardSmall.astro
+++ b/src/components/ui/cards/CardSmall.astro
@@ -1,6 +1,7 @@
 ---
 // Import necessary modules and utilities
 import { Image } from "astro:assets";
+import Icon from "../icons/Icon.astro";
 import type { CollectionEntry } from "astro:content";
 
 const { product } = Astro.props;
@@ -11,11 +12,6 @@ interface Props {
 // Define classes to be used with the Image component
 const imageClass =
   "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110";
-// AnchorSVG - an SVG icon to be added next to the product's subtitle
-const AnchorSVG = `
-    <svg fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="ml-0.5 w-3 h-3 md:w-4 md:h-4 inline pb-0.5">
-<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
-    </svg>`;
 ---
 
 <!-- A clickable card that leads to the details of the product-->
@@ -40,6 +36,6 @@ const AnchorSVG = `
   <!-- The product's subtitle and the anchor SVG icon-->
   <span
     class="relative mb-3 ml-4 inline-block text-sm font-bold text-neutral-50 transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110 md:ml-5 md:text-lg"
-    >{product.data.main.subTitle} <Fragment set:html={AnchorSVG} />
+    >{product.data.main.subTitle} <Icon name="openInNew" />
   </span>
 </a>
diff --git a/src/components/ui/cards/CardWide.astro b/src/components/ui/cards/CardWide.astro
index cb22d66..2dd3a78 100644
--- a/src/components/ui/cards/CardWide.astro
+++ b/src/components/ui/cards/CardWide.astro
@@ -1,6 +1,7 @@
 ---
 // Import necessary modules and utilities
 import { Image } from "astro:assets";
+import Icon from "../icons/Icon.astro";
 import type { CollectionEntry } from "astro:content";
 
 const { product } = Astro.props;
@@ -11,11 +12,6 @@ interface Props {
 // Define classes to be used with the Image component
 const imageClass =
   "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110";
-// AnchorSVG - an SVG icon to be added next to the product's subtitle
-const AnchorSVG = `
-    <svg fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="ml-0.5 w-3 h-3 md:w-4 md:h-4 inline pb-0.5">
-<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
-    </svg>`;
 ---
 
 <!-- The anchor tag is the main container for the product card. When clicked, this leads to the details of the product. -->
@@ -40,6 +36,6 @@ const AnchorSVG = `
   <!-- This container includes product's subtitle and an SVG icon-->
   <span
     class="relative mb-3 ml-4 inline-block text-sm font-bold text-neutral-50 transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110 md:ml-5 md:text-lg"
-    >{product.data.main.subTitle} <Fragment set:html={AnchorSVG} /></span
+    >{product.data.main.subTitle} <Icon name="openInNew" /></span
   >
 </a>