refactor: add reusable icon component

Author: Link1515

src/components/Icon.astro

@@ -0,0 +1,21 @@
+---
+let { name, width, height } = Astro.props
+
+if (!height) {
+  height = width
+}
+
+if (isNum(width)) {
+  width = `${width}px`
+}
+
+if (isNum(height)) {
+  height = `${height}px`
+}
+
+function isNum(value) {
+  return !isNaN(value)
+}
+---
+
+<iconify-icon icon={name} width="none" style={{ width: `${width}`, height: `${height}` }}></iconify-icon>

src/components/Modal.astro

@@ -1,10 +1,14 @@
+---
+import Icon from '~/components/Icon.astro'
+---
+
 <div id="modal" class="pointer-events-none fixed top-0 left-0 z-99999 flex h-full w-full items-center justify-center bg-black/20 p-4 opacity-0 backdrop-blur-xs transition-opacity duration-300">
   <div class="flex max-h-full max-w-full translate-y-5 flex-col rounded-lg bg-white p-4 pb-0 transition-transform duration-300 md:max-w-lg md:min-w-80">
     <div class="modal-header mb-6"></div>
     <div class="modal-body overflow-y-auto"></div>
     <div class="flex items-center justify-center bg-white py-1">
       <button id="modal-close-btn" class="text-info hover:text-info-dark grid place-items-center transition-colors">
-        <iconify-icon icon="mdi:close-circle" width="none" style="width: 28px; height: 28px"></iconify-icon>
+        <Icon name="mdi:close-circle" width="28" />
       </button>
     </div>
   </div>

src/components/Navbar.astro

@@ -2,6 +2,7 @@
 import { useI18n, getLocaleFromPath } from '~/i18n/utils'
 import { getRelativeLocaleUrl } from 'astro:i18n'
 import { pathnameWithoutBaseAndLocale } from '~/utils/build/pathnameWithoutBaseAndLocale'
+import Icon from '~/components/Icon.astro'
 
 const locale = getLocaleFromPath(Astro.url.pathname)
 const { t } = useI18n(Astro.url.pathname)
@@ -36,7 +37,7 @@ const navs = [
     <div class="group relative hidden h-full items-center gap-2 px-4 font-bold md:flex">
       <span class="flex cursor-pointer items-center gap-2">
         Language
-        <iconify-icon icon="mdi:language" class="icon-18"></iconify-icon>
+        <Icon name="mdi:language" width="20" />
       </span>
 
       <div
@@ -65,7 +66,7 @@ const navs = [
           }
 
           <div class="flex items-center gap-2 py-2 text-xl">
-            <iconify-icon icon="mdi:language" class="icon-18"></iconify-icon>
+            <Icon name="mdi:language" width="20" />
             <a href={getRelativeLocaleUrl('zh-tw', pathname)}>華語</a>
             <span>|</span>
             <a href={getRelativeLocaleUrl('en', pathname)}>English</a>

src/components/agenda/Agenda.astro

@@ -3,6 +3,7 @@ import { useI18n } from '~/i18n/utils'
 import Layout from '~/layouts/Layout.astro'
 import Desktop from './desktop/Desktop.astro'
 import Mobile from './mobile/Mobile.astro'
+import Icon from '~/components/Icon.astro'
 
 const { t } = useI18n(Astro.url.pathname)
 const { title, date } = Astro.props
@@ -12,13 +13,13 @@ const { title, date } = Astro.props
   <div class="container">
     <h1 class="my-8 md:my-12">{t('agenda.title')}</h1>
 
-    <div class="mb-8 flex flex-col md:flex-row gap-4">
+    <div class="mb-8 flex flex-col gap-4 md:flex-row">
       <a href="#" class="btn btn-info flex gap-1 px-14!">
-        <iconify-icon icon="mdi:text-box-edit" width="24" height="24" style="width: 24px; height: 24px"></iconify-icon>
+        <Icon name="mdi:text-box-edit" width="24" />
         <span>{t('agenda.main_note')}</span>
       </a>
       <a href="#" class="btn btn-info flex gap-1 px-14!">
-        <iconify-icon icon="mdi:video" width="24" height="24" style="width: 24px; height: 24px"></iconify-icon>
+        <Icon name="mdi:video" width="24" />
         <span>{t('agenda.main_live')}</span>
       </a>
     </div>

src/pages/visit.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '~/layouts/Layout.astro'
 import { useI18n } from '~/i18n/utils'
+import Icon from '~/components/Icon.astro'
 
 const { t } = useI18n(Astro.url.pathname)
 ---
@@ -65,7 +66,7 @@ const { t } = useI18n(Astro.url.pathname)
             id="visit-tab-publicTransport"
             data-tab="publicTransport"
           >
-            <iconify-icon icon="mdi:bus" class="size-5 shrink-0" aria-hidden="true"></iconify-icon>
+            <Icon name="mdi:bus" width="20" />
             <span class="hidden md:inline">{t('visit.transport.tabs.publicTransport')}</span>
           </button>
           <button
@@ -78,7 +79,7 @@ const { t } = useI18n(Astro.url.pathname)
             id="visit-tab-driving"
             data-tab="driving"
           >
-            <iconify-icon icon="mdi:car" class="size-5 shrink-0" aria-hidden="true"></iconify-icon>
+            <Icon name="mdi:car" width="20" />
             <span class="hidden md:inline">{t('visit.transport.tabs.drivingLine1')}<span class="whitespace-nowrap">{t('visit.transport.tabs.drivingLine2')}</span></span>
           </button>
         </div>

src/styles/base.css

@@ -17,19 +17,19 @@
     @apply font-bold;
   }
   h1 {
-    @apply md:text-4xl text-3xl;
+    @apply text-3xl md:text-4xl;
   }
   h2 {
-    @apply md:text-3xl text-2xl;
+    @apply text-2xl md:text-3xl;
   }
   h3 {
-    @apply md:text-2xl text-xl;
+    @apply text-xl md:text-2xl;
   }
   h4 {
-    @apply md:text-xl text-lg;
+    @apply text-lg md:text-xl;
   }
   h5 {
-    @apply md:text-lg text-base;
+    @apply text-base md:text-lg;
   }
   p {
     @apply leading-8;
@@ -126,9 +126,6 @@
   .btn-outline-dark {
     @apply border border-neutral-500 text-neutral-500 hover:bg-neutral-500 hover:text-white;
   }
-  .icon-18 {
-    @apply h-4.5 w-4.5 text-lg;
-  }
   .nav-link {
     @apply flex h-full cursor-pointer items-center px-4 text-nowrap transition-[background-color] hover:bg-neutral-500;
   }