feat: redo how images, icons, and logos are handled

src/components/buttons/BookmarkButton.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from '@components/ui/icons/icon.astro';
+
 ---
 
 <button
@@ -7,7 +7,22 @@ import Icon from '@components/ui/icons/icon.astro';
   class="button-base button-bg-blue group inline-flex items-center rounded-lg p-2.5"
   data-bookmark-button="bookmark-button"
 >
-  <Icon name="bookmark" />
+  <svg
+    class="h-6 w-6 fill-none transition duration-300"
+    height=24
+    width=24
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      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"
+      class="fill-current text-neutral-500 transition duration-300 group-hover:text-red-400 group-hover:dark:text-red-400"
+    />
+  </svg>
 </button>
 
 <script>

src/components/buttons/GoBackButton.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from '@components/ui/icons/icon.astro';
+
 ---
 
 <button
@@ -8,7 +8,19 @@ import Icon from '@components/ui/icons/icon.astro';
   data-astro-prefetch
 >
   <div class="button-text-title flex relative items-center text-center">
-    <Icon name="arrowLeft" />
+    <svg
+      class=" shrink-0 group-hover:-translate-x-1 transition duration-300 h-4 w-4"
+      height=24
+      width=24
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m15 18-6-6 6-6"/>
+    </svg>
     <span class="ml-2">
       Go Back
     </span>

src/components/buttons/SocialShareButton.astro

@@ -1,10 +1,11 @@
 ---
-import Icon from '@components/ui/icons/icon.astro';
+import Logo from "@components/images/Logo.astro"
 
 type SocialPlatform = {
   name: string;
   url: string;
-  svg: string;
+  iconLight: string;
+  iconDark: string;
 };
 
 interface Props {
@@ -17,17 +18,20 @@ const socialPlatforms: SocialPlatform[] = [
   {
     name: 'Facebook',
     url: `https://www.facebook.com/sharer/sharer.php?u=${Astro.url}`,
-    svg: 'facebook',
+    iconLight: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/facebook.webp',
+    iconDark: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/facebook.webp',
   },
   {
-    name: 'X',
+    name: 'Twitter',
     url: `https://x.com/intent/tweet?url=${Astro.url}&text=${pageTitle}`,
-    svg: 'x',
+    iconLight: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/twitter.webp',
+    iconDark: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/twitter.webp',
   },
   {
     name: 'LinkedIn',
     url: `https://www.linkedin.com/sharing/share-offsite/?url=${Astro.url}`,
-    svg: 'linkedIn',
+    iconLight: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/linkedin.webp',
+    iconDark: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/linkedin.webp',
   },
 ];
 ---
@@ -42,9 +46,12 @@ const socialPlatforms: SocialPlatform[] = [
     title={`Share on ${platform.name}`}
   >
     <div class="button-text-title-hidden flex relative items-center text-center">
-      <Icon
-        name={platform.svg}
-        class="h-5 w-5"
+      <Logo
+        srcLight={platform.iconLight}
+        srcDark={platform.iconDark}
+        alt={platform.name}
+        width="24"
+        height="24"
       />
     </div>
   </a>