Add accessible names to decorative SVG icons

Author: huangkevin-apr

src/components/IconButton.astro

@@ -21,7 +21,7 @@ const { icon, label, href, className } = Astro.props;
       class={`inline-block h-min w-min rounded-full p-2 leading-0 transition-colors hover:bg-gray-800/20 dark:hover:bg-gray-400/20 ${className}`}
       aria-label={label}
     >
-      <Icon name={icon} class="size-6 text-gray-700 dark:text-gray-300" />
+      <Icon name={icon} class="size-6 text-gray-700 dark:text-gray-300" aria-hidden="true" />
     </a>
   ) : (
     <button class={`h-min w-min rounded-full p-2 transition-colors hover:bg-gray-800/20 ${className}`} aria-label={label}>

src/components/layout/NavBar.astro

@@ -33,11 +33,11 @@ import LogoMarkerLight from "@/assets/brand/logo-marker-light.svg";
       </NavDropDown>
       <NavLink href="https://hangar.papermc.io/" target="_blank" className="inline-flex items-center">
         Plugins
-        <Icon name="icons/heroicons/arrow-top-right-on-square" class="ml-1 size-4 align-sub" />
+        <Icon name="icons/heroicons/arrow-top-right-on-square" class="ml-1 size-4 align-sub" aria-hidden="true" />
       </NavLink>
       <NavLink href="https://docs.papermc.io/" target="_blank" className="inline-flex items-center">
         Docs
-        <Icon name="icons/heroicons/arrow-top-right-on-square" class="ml-1 size-4 align-sub" />
+        <Icon name="icons/heroicons/arrow-top-right-on-square" class="ml-1 size-4 align-sub" aria-hidden="true" />
       </NavLink>
       <NavLink href="/news">News</NavLink>
       <NavLink href="/team">Team</NavLink>

src/components/layout/NavDropDown.astro

@@ -27,7 +27,7 @@ const { label, className } = Astro.props;
     data-trigger
   >
     {label}
-    <Icon name="icons/heroicons/chevron-down" class="h-4 w-4 fill-gray-700 dark:fill-gray-300" />
+    <Icon name="icons/heroicons/chevron-down" class="h-4 w-4 fill-gray-700 dark:fill-gray-300" aria-hidden="true" />
   </span>
 
   <ul