From 507523aaabfcd618111f3a11aaf35e29049f6103 Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Fri, 4 Aug 2023 18:16:39 -0400
Subject: [PATCH] Use icons from static file server

The TSX icon components have been deleted since they will no longer be used.
---
 _components/footer.tsx                | 28 +++++++++++++++++--------
 _components/icons/ChartAreaFilled.tsx |  9 --------
 _components/icons/ChartBar.tsx        | 11 ----------
 _components/icons/Diamonds.tsx        |  8 -------
 _components/icons/FileCV.tsx          | 11 ----------
 _components/icons/Forgejo.tsx         | 10 ---------
 _components/icons/GPS.tsx             |  9 --------
 _components/icons/Heart.tsx           |  8 -------
 _components/icons/HeartHandshake.tsx  | 11 ----------
 _components/icons/Home.tsx            | 10 ---------
 _components/icons/Key.tsx             |  9 --------
 _components/icons/Mail.tsx            |  9 --------
 _components/icons/Mastodon.tsx        | 10 ---------
 _components/icons/README.org          |  3 ---
 _components/icons/School.tsx          |  9 --------
 _components/icons/User.tsx            |  9 --------
 _components/navbar.tsx                | 30 +++++++++++++++++++++++----
 _components/separator.tsx             | 10 +++++++--
 _includes/styles/base.scss            |  5 +++++
 19 files changed, 58 insertions(+), 151 deletions(-)
 delete mode 100644 _components/icons/ChartAreaFilled.tsx
 delete mode 100644 _components/icons/ChartBar.tsx
 delete mode 100644 _components/icons/Diamonds.tsx
 delete mode 100644 _components/icons/FileCV.tsx
 delete mode 100644 _components/icons/Forgejo.tsx
 delete mode 100644 _components/icons/GPS.tsx
 delete mode 100644 _components/icons/Heart.tsx
 delete mode 100644 _components/icons/HeartHandshake.tsx
 delete mode 100644 _components/icons/Home.tsx
 delete mode 100644 _components/icons/Key.tsx
 delete mode 100644 _components/icons/Mail.tsx
 delete mode 100644 _components/icons/Mastodon.tsx
 delete mode 100644 _components/icons/README.org
 delete mode 100644 _components/icons/School.tsx
 delete mode 100644 _components/icons/User.tsx

diff --git a/_components/footer.tsx b/_components/footer.tsx
index b9d95f8..9e600b5 100644
--- a/_components/footer.tsx
+++ b/_components/footer.tsx
@@ -1,26 +1,36 @@
 export default function({ comp }) {
-  const {
-    Forgejo: ForgejoIcon,
-    Mastodon: MastodonIcon,
-    Mail: MailIcon,
-  } = comp.icons;
+  const iconStyle = {
+    filter: "var(--filter-fg)",
+  };
 
   return (
     <footer className="page-footer">
       {comp.separator()}
       <div className="social-links">
         <a href="https://code.fosterhangdaan.com/foster" title="Forgejo" target="_blank">
-          <ForgejoIcon/>
+          <img
+            src="https://static.fosterhangdaan.com/icons/simple-icons/latest/forgejo.svg"
+            className="icon"
+            style={iconStyle}
+          />
         </a>
         <a href="https://mastodon.online/@foster" title="Mastodon" target="_blank">
-          <MastodonIcon/>
+          <img
+            src="https://static.fosterhangdaan.com/icons/simple-icons/latest/mastodon.svg"
+            className="icon"
+            style={iconStyle}
+          />
         </a>
         <a href="mailto:foster@hangdaan.email" title="eMail">
-          <MailIcon/>
+          <img
+            src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/mail-filled.svg"
+            className="icon"
+            style={iconStyle}
+          />
         </a>
       </div>
       <p>Copyright &copy; 2023 Foster Hangdaan</p>
-      <p>Made with <a href="https://deno.land/" target="_blank">Deno</a>, <a href="https://lume.land/" target="_blank">Lume</a>, <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> and lots of <span className="heart">{ comp.icons.Heart() }</span>.</p>
+      <p>Made with <a href="https://deno.land/" target="_blank">Deno</a>, <a href="https://lume.land/" target="_blank">Lume</a>, <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> and lots of <img src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/heart.svg" className="icon" style={{ filter: "var(--filter-red)" }} title="love"/>.</p>
     </footer>
   );
 }
diff --git a/_components/icons/ChartAreaFilled.tsx b/_components/icons/ChartAreaFilled.tsx
deleted file mode 100644
index 83c2744..0000000
--- a/_components/icons/ChartAreaFilled.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chart-area-filled" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M20 18a1 1 0 0 1 .117 1.993l-.117 .007h-16a1 1 0 0 1 -.117 -1.993l.117 -.007h16z" stroke-width="0" fill="currentColor" />
-      <path d="M15.22 5.375a1 1 0 0 1 1.393 -.165l.094 .083l4 4a1 1 0 0 1 .284 .576l.009 .131v5a1 1 0 0 1 -.883 .993l-.117 .007h-16.022l-.11 -.009l-.11 -.02l-.107 -.034l-.105 -.046l-.1 -.059l-.094 -.07l-.06 -.055l-.072 -.082l-.064 -.089l-.054 -.096l-.016 -.035l-.04 -.103l-.027 -.106l-.015 -.108l-.004 -.11l.009 -.11l.019 -.105c.01 -.04 .022 -.077 .035 -.112l.046 -.105l.059 -.1l4 -6a1 1 0 0 1 1.165 -.39l.114 .05l3.277 1.638l3.495 -4.369z" stroke-width="0" fill="currentColor" />
-    </svg>
-  );
-}
diff --git a/_components/icons/ChartBar.tsx b/_components/icons/ChartBar.tsx
deleted file mode 100644
index b0c1d91..0000000
--- a/_components/icons/ChartBar.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chart-bar" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
-      <path d="M9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
-      <path d="M15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
-      <path d="M4 20l14 0" />
-    </svg>
-  );
-}
diff --git a/_components/icons/Diamonds.tsx b/_components/icons/Diamonds.tsx
deleted file mode 100644
index 3cd2433..0000000
--- a/_components/icons/Diamonds.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-diamonds" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M10.831 20.413l-5.375 -6.91c-.608 -.783 -.608 -2.223 0 -3l5.375 -6.911a1.457 1.457 0 0 1 2.338 0l5.375 6.91c.608 .783 .608 2.223 0 3l-5.375 6.911a1.457 1.457 0 0 1 -2.338 0z" />
-    </svg>
-  );
-}
diff --git a/_components/icons/FileCV.tsx b/_components/icons/FileCV.tsx
deleted file mode 100644
index b347a91..0000000
--- a/_components/icons/FileCV.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-cv" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M14 3v4a1 1 0 0 0 1 1h4" />
-      <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-      <path d="M11 12.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0" />
-      <path d="M13 11l1.5 6l1.5 -6" />
-    </svg>
-  );
-}
diff --git a/_components/icons/Forgejo.tsx b/_components/icons/Forgejo.tsx
deleted file mode 100644
index c780932..0000000
--- a/_components/icons/Forgejo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-// Icon from Simple Icons
-
-export default function() {
-  return (
-    <svg role="img" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <title>Forgejo</title>
-      <path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z"/>
-    </svg>
-  );
-}
diff --git a/_components/icons/GPS.tsx b/_components/icons/GPS.tsx
deleted file mode 100644
index b50ca7f..0000000
--- a/_components/icons/GPS.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-gps" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
-      <path d="M12 17l-1 -4l-4 -1l9 -4z" />
-    </svg>
-  );
-}
diff --git a/_components/icons/Heart.tsx b/_components/icons/Heart.tsx
deleted file mode 100644
index 8a7d94a..0000000
--- a/_components/icons/Heart.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
-    </svg>
-  );
-}
diff --git a/_components/icons/HeartHandshake.tsx b/_components/icons/HeartHandshake.tsx
deleted file mode 100644
index 6b5fb08..0000000
--- a/_components/icons/HeartHandshake.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-handshake" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
-      <path d="M12 6l-3.293 3.293a1 1 0 0 0 0 1.414l.543 .543c.69 .69 1.81 .69 2.5 0l1 -1a3.182 3.182 0 0 1 4.5 0l2.25 2.25" />
-      <path d="M12.5 15.5l2 2" />
-      <path d="M15 13l2 2" />
-    </svg>
-  );
-}
diff --git a/_components/icons/Home.tsx b/_components/icons/Home.tsx
deleted file mode 100644
index 45de834..0000000
--- a/_components/icons/Home.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
-      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-    </svg>
-  );
-}
diff --git a/_components/icons/Key.tsx b/_components/icons/Key.tsx
deleted file mode 100644
index 91b0d38..0000000
--- a/_components/icons/Key.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-key" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z" />
-      <path d="M15 9h.01" />
-    </svg>
-  );
-}
diff --git a/_components/icons/Mail.tsx b/_components/icons/Mail.tsx
deleted file mode 100644
index 59ea555..0000000
--- a/_components/icons/Mail.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-filled" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M22 7.535v9.465a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9.465l9.445 6.297l.116 .066a1 1 0 0 0 .878 0l.116 -.066l9.445 -6.297z" stroke-width="0" fill="currentColor" />
-      <path d="M19 4c1.08 0 2.027 .57 2.555 1.427l-9.555 6.37l-9.555 -6.37a2.999 2.999 0 0 1 2.354 -1.42l.201 -.007h14z" stroke-width="0" fill="currentColor" />
-    </svg>
-  )
-}
diff --git a/_components/icons/Mastodon.tsx b/_components/icons/Mastodon.tsx
deleted file mode 100644
index e6684cd..0000000
--- a/_components/icons/Mastodon.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-// Icon from Simple Icons
-
-export default function() {
-  return (
-    <svg role="img" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <title>Mastodon</title>
-      <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
-    </svg>
-  );
-}
diff --git a/_components/icons/README.org b/_components/icons/README.org
deleted file mode 100644
index 95c543b..0000000
--- a/_components/icons/README.org
+++ /dev/null
@@ -1,3 +0,0 @@
-#+title: Icons
-
-Icons as TSX components. Icons are obtained from Tabler Icons and Simple Icons.
diff --git a/_components/icons/School.tsx b/_components/icons/School.tsx
deleted file mode 100644
index 3837e33..0000000
--- a/_components/icons/School.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-school" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M22 9l-10 -4l-10 4l10 4l10 -4v6" />
-      <path d="M6 10.6v5.4a6 3 0 0 0 12 0v-5.4" />
-    </svg>
-  );
-}
diff --git a/_components/icons/User.tsx b/_components/icons/User.tsx
deleted file mode 100644
index ea4ecdc..0000000
--- a/_components/icons/User.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-      <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
-      <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
-    </svg>
-  )
-}
diff --git a/_components/navbar.tsx b/_components/navbar.tsx
index 247156d..d3186b6 100644
--- a/_components/navbar.tsx
+++ b/_components/navbar.tsx
@@ -1,15 +1,37 @@
-export default function({ comp }) {
+export default function() {
+  const iconStyle = {
+    filter: "var(--filter-blue)",
+  };
+
   return (
     <nav className="navbar">
       <ul className="navbar-list">
         <li className="navbar-list-item home">
-          <a href="/">{ comp.icons.Home() }</a>
+          <a href="/">
+            <img
+              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/home.svg"
+              className="icon"
+              style={iconStyle}
+            />
+          </a>
         </li>
         <li className="navbar-list-item">
-          <a href="/gpg-key" title="GPG Key">{ comp.icons.Key() }</a>
+          <a href="/gpg-key" title="GPG Key">
+            <img
+              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/key.svg"
+              className="icon"
+              style={iconStyle}
+            />
+          </a>
         </li>
         <li className="navbar-list-item">
-          <a href="/resume" title="Resume">{ comp.icons.FileCV() }</a>
+          <a href="/resume" title="Resume">
+            <img
+              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/file-cv.svg"
+              className="icon"
+              style={iconStyle}
+            />
+          </a>
         </li>
       </ul>
     </nav>
diff --git a/_components/separator.tsx b/_components/separator.tsx
index 8ae0d64..d798326 100644
--- a/_components/separator.tsx
+++ b/_components/separator.tsx
@@ -1,8 +1,14 @@
-export default function ({ comp }) {
+export default function () {
   return (
     <div className="separator">
       <span className="outer-outline"/>
-      <span>{ comp.icons.Diamonds() }</span>
+      <span>
+        <img
+          src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/diamonds.svg"
+          className="icon"
+          style={{ filter: "var(--filter-black)" }}
+        />
+      </span>
       <span className="outer-outline"/>
     </div>
   );
diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss
index e60239e..a793779 100644
--- a/_includes/styles/base.scss
+++ b/_includes/styles/base.scss
@@ -185,3 +185,8 @@ table {
     }
   }
 }
+
+img.icon {
+  width: 1em;
+  height: 1em;
+}