Commit df75b59

HPCesia <me@hpcesia.com>
2025-04-04 15:11:46
refactor(icon): use width and height attributes instead of `text-[size]`
master
1 parent 59f9ca5
Changed files (8)
src
components
search
Pagefind.astro
SearchBaseUI.astro
user
LinkCard.astro
RepoCard.astro
Navbar.astro
pages
archives
categories
index.astro
tags
index.astro
[...time].astro
src/components/search/Pagefind.astro
@@ -15,7 +15,12 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
   <a class="group hover:bg-primary/30 w-full rounded-md p-2 duration-150" href="#">
     <div class="flex flex-row items-center gap-1 text-center">
       <span class="group-hover:text-primary text-lg duration-150">Fake Result</span>
-      <Icon name="material-symbols:chevron-right" class="text-primary text-lg" />
+      <Icon
+        name="material-symbols:chevron-right"
+        class="text-primary"
+        height="1.125rem"
+        width="1.125rem"
+      />
     </div>
     <div id="pagefind-result-template-excerpt" class="text-sm opacity-60">
       This is a fake result.
src/components/search/SearchBaseUI.astro
@@ -12,7 +12,7 @@ const { class: className, ...rest } = Astro.props;
 <div class:list={['w-full', className]} {...rest}>
   <label class="input input-bordered flex w-full items-center gap-2">
     <input type="text" class="grow" placeholder={i18n(I18nKey.search)} />
-    <Icon name="material-symbols:search-rounded" class="text-3xl" />
+    <Icon name="material-symbols:search-rounded" height="1.875rem" width="1.875rem" />
   </label>
   <div
     class="search-result mt-4 flex h-fit max-h-[calc(60vh-8rem)] flex-col items-center gap-2 overflow-y-auto text-center"
src/components/user/LinkCard.astro
@@ -18,6 +18,6 @@ let { title, description, url } = Astro.props;
       </div>
       <div class="card-desc text-base-content/50">{description}</div>
     </div>
-    <Icon name="material-symbols:arrow-right-alt-rounded" class="text-3xl" />
+    <Icon name="material-symbols:arrow-right-alt-rounded" height="1.875rem" width="1.875rem" />
   </div>
 </a>
src/components/user/RepoCard.astro
@@ -34,7 +34,7 @@ switch (platform) {
   <div class="card-body p-4">
     <div class="card-title mb-4 justify-between">
       <span class="text-xl">{repoName}</span>
-      <Icon name={platformIconName} class="text-5xl" />
+      <Icon name={platformIconName} height="3rem" width="3rem" />
     </div>
     <div class="repo-card-desc flex flex-col gap-2">
       <div class="skeleton h-4 w-full"></div>
@@ -42,19 +42,19 @@ switch (platform) {
     </div>
     <div class="card-actions">
       <div class="repo-card-star flex items-center justify-center gap-1.5">
-        <Icon name="material-symbols:star-outline-rounded" class="text-xl" />
+        <Icon name="material-symbols:star-outline-rounded" height="1.25rem" width="1.25rem" />
         <span class="skeleton h-4 w-6"></span>
       </div>
       <div class="repo-card-fork flex items-center justify-center gap-1.5">
-        <Icon name="material-symbols:fork-right-rounded" class="text-xl" />
+        <Icon name="material-symbols:fork-right-rounded" height="1.25rem" width="1.25rem" />
         <span class="skeleton h-4 w-6"></span>
       </div>
       <div class="repo-card-license hidden items-center justify-center gap-1.5">
-        <Icon name="material-symbols:balance-rounded" class="text-xl" />
+        <Icon name="material-symbols:balance-rounded" height="1.25rem" width="1.25rem" />
         <span></span>
       </div>
       <div class="repo-card-lang hidden items-center justify-center gap-1.5">
-        <Icon name="mingcute:code-line" class="text-xl" />
+        <Icon name="mingcute:code-line" height="1.25rem" width="1.25rem" />
         <span></span>
       </div>
     </div>
src/components/Navbar.astro
@@ -100,7 +100,7 @@ if (!title) title = 'Astral Halo';
                     ? { onclick: item.onclick }
                     : { id: 'nav-' + item.onclick.id }))}
               >
-                <Icon name={item.icon} class="text-2xl" />
+                <Icon name={item.icon} height="1.5rem" width="1.5rem" />
               </Button>
             ))
           }
@@ -118,14 +118,14 @@ if (!title) title = 'Astral Halo';
                     ? { onclick: item.onclick }
                     : { id: 'nav-' + item.onclick.id }))}
               >
-                <Icon name={item.icon} class="text-2xl" />
+                <Icon name={item.icon} height="1.5rem" width="1.5rem" />
               </Button>
             ))
           }
         </div>
         <div class="md:hidden">
           <label for="sidebar-drawer" class="btn btn-circle btn-ghost btn-primary">
-            <Icon name="material-symbols:menu-rounded" class="text-2xl" />
+            <Icon name="material-symbols:menu-rounded" height="1.5rem" width="1.5rem" />
           </label>
         </div>
       </div>
@@ -208,7 +208,7 @@ if (!title) title = 'Astral Halo';
                   : { id: 'side-' + item.onclick.id }))}
               class="btn-ghost"
             >
-              <Icon name={item.icon} class="text-2xl" />
+              <Icon name={item.icon} height="1.5rem" width="1.5rem" />
               <span class="text-xl">{i18n(item.text)}</span>
             </Button>
           </li>
src/pages/archives/categories/index.astro
@@ -59,7 +59,11 @@ if (uncategorizedPosts.length > 0)
           <li>
             {index > 0 && <hr />}
             <div class="timeline-middle">
-              <Icon name="material-symbols:add-circle-rounded" class="text-xl" />
+              <Icon
+                name="material-symbols:add-circle-rounded"
+                height="1.25rem"
+                width="1.25rem"
+              />
             </div>
             <div class:list={[`timeline-${index % 2 === 0 ? 'start' : 'end'}`, 'w-full']}>
               <div
@@ -76,7 +80,11 @@ if (uncategorizedPosts.length > 0)
                 </h2>
                 <Button href={getCategoryUrl(category)} title={category} class="pl-3">
                   {i18n(I18nKey.more)}
-                  <Icon name="material-symbols:chevron-right-rounded" class="text-2xl" />
+                  <Icon
+                    name="material-symbols:chevron-right-rounded"
+                    height="1.5rem"
+                    width="1.5rem"
+                  />
                 </Button>
               </div>
               <ul class="list">
src/pages/archives/tags/index.astro
@@ -52,7 +52,11 @@ if (untaggedPosts.length > 0) tagPosts.set(i18n(I18nKey.untagged) as string, unt
           <li>
             {index > 0 && <hr />}
             <div class="timeline-middle">
-              <Icon name="material-symbols:add-circle-rounded" class="text-xl" />
+              <Icon
+                name="material-symbols:add-circle-rounded"
+                height="1.25rem"
+                width="1.25rem"
+              />
             </div>
             <div class:list={[`timeline-${index % 2 === 0 ? 'start' : 'end'}`, 'w-full']}>
               <div
@@ -69,7 +73,11 @@ if (untaggedPosts.length > 0) tagPosts.set(i18n(I18nKey.untagged) as string, unt
                 </h2>
                 <Button href={getTagUrl(tag)} title={tag} class="pl-3">
                   {i18n(I18nKey.more)}
-                  <Icon name="material-symbols:chevron-right-rounded" class="text-2xl" />
+                  <Icon
+                    name="material-symbols:chevron-right-rounded"
+                    height="1.5rem"
+                    width="1.5rem"
+                  />
                 </Button>
               </div>
               <ul class="list">
src/pages/archives/[...time].astro
@@ -153,7 +153,11 @@ const postCount = await getPostsCount();
                 <li>
                   {index > 0 && <hr />}
                   <div class="timeline-middle">
-                    <Icon name="material-symbols:add-circle-rounded" class="text-xl" />
+                    <Icon
+                      name="material-symbols:add-circle-rounded"
+                      height="1.25rem"
+                      width="1.25rem"
+                    />
                   </div>
                   <div
                     class:list={[
@@ -175,7 +179,11 @@ const postCount = await getPostsCount();
                         class="pl-3"
                       >
                         {i18n(I18nKey.more)}
-                        <Icon name="material-symbols:chevron-right-rounded" class="text-2xl" />
+                        <Icon
+                          name="material-symbols:chevron-right-rounded"
+                          height="1.5rem"
+                          width="1.5rem"
+                        />
                       </Button>
                     </div>
                     <div class="mx-2">{renderMonth(year, month)}</div>