Add more icons

src/components/astro/footers/BasicFooter.astro

@@ -1,5 +1,5 @@
 ---
-  import { IconTwitter, IconGithub, IconFacebook, IconArrowRight } from "~/components/astro/icons";
+  import { IconTwitter, IconInstagram, IconFacebook, IconArrowRight } from "~/components/astro/icons";
   const { } = Astro.props;
 ---
 
@@ -108,14 +108,13 @@
           <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
             aria-label="Twitter" href="/">
             <IconTwitter />
-            
+
           </a>
         </li>
         <li class="ml-4">
           <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
-            aria-label="Github" href="/">
-            
-            <IconGithub />
+            aria-label="Instagram" href="/">
+            <IconInstagram />
           </a>
         </li>
         <li class="ml-4">
@@ -124,6 +123,7 @@
             <IconFacebook />
           </a>
         </li>
+
       </ul>
       <div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
         Made by <a class="text-blue-600 hover:underline" href="https://onwidget.com/">onWidget</a>. All rights reserved.

src/components/astro/icons/IconInstagram.astro

@@ -0,0 +1,11 @@
+---
+  const { className = "w-5 h-5" } = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class={className} width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75"
+  stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <rect x="4" y="4" width="16" height="16" rx="4"></rect>
+  <circle cx="12" cy="12" r="3"></circle>
+  <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
+</svg>

src/components/astro/icons/index.js

@@ -2,6 +2,7 @@ import IconSun from "./IconSun.astro"
 import IconGithub from "./IconGithub.astro"
 import IconTwitter from "./IconTwitter.astro"
 import IconFacebook from "./IconFacebook.astro"
+import IconInstagram from "./IconInstagram.astro"
 import IconArrowRight from "./IconArrowRight.astro"
 import IconMenu from "./IconMenu.astro"
 
@@ -10,6 +11,7 @@ export {
   IconGithub,
   IconTwitter,
   IconFacebook,
+  IconInstagram,
   IconArrowRight,
   IconMenu
 }