<Icon>に任意の属性を設定可能とし、「Join OUCC!」の表示がスマホで崩れる問題を修正

fix #24
OUCC · Oct 3, 2023 · 8f4e6ba · 8f4e6ba
1 parent a3629e7
commit 8f4e6ba
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 33 deletions.
diff --git a/src/components/Icon.astro b/src/components/Icon.astro
@@ -1,15 +1,16 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import { optimize } from 'svgo'
 
-interface Props {
+type Props = HTMLAttributes<'svg'> & {
   // `src/assets/icons`にあるSVGのファイル名
   name: string
 
   // `aria-label`に指定するテキスト
   alt: string
 }
 
-const { name, alt } = Astro.props
+const { name, alt, ...attrs } = Astro.props
 
 const svgContent = (await import(`../assets/icons/${name}.svg?raw`)).default
 
@@ -31,7 +32,7 @@ const { data: optimizedSvgContent } = optimize(svgContent, {
         attribute: {
           role: 'img',
           'aria-label': alt,
-          style: 'width:100%;height:100%',
+          ...attrs,
         },
       },
     },

diff --git a/src/components/button/DiscordJoinLink.astro b/src/components/button/DiscordJoinLink.astro
@@ -9,9 +9,7 @@ import LinkButton from './LinkButton.astro'
   variant="discord"
 >
   <span class="flex items-center gap-2.5">
-    <span class="w-7">
-      <Icon name="discord" alt="Discord" />
-    </span>
+    <Icon name="discord" alt="Discord" class="w-7" />
     <span>公開サーバーに参加</span>
   </span>
 </LinkButton>
diff --git a/src/components/button/PeingLink.astro b/src/components/button/PeingLink.astro
@@ -5,9 +5,7 @@ import LinkButton from './LinkButton.astro'
 
 <LinkButton href="https://peing.net/ja/oucc" target="_blank" variant="peing">
   <span class="flex items-center gap-2.5">
-    <span class="w-6">
-      <Icon name="box" alt="Peing" />
-    </span>
+    <Icon name="box" alt="Peing" class="w-6" />
     <span>質問箱</span>
   </span>
 </LinkButton>
diff --git a/src/components/button/TwitterLink.astro b/src/components/button/TwitterLink.astro
@@ -5,9 +5,7 @@ import LinkButton from './LinkButton.astro'
 
 <LinkButton href="https://twitter.com/OUCC" target="_blank" variant="twitter">
   <span class="flex items-center gap-2.5">
-    <span class="w-7">
-      <Icon name="twitter" alt="Twitter" />
-    </span>
+    <Icon name="twitter" alt="Twitter" class="w-7" />
     <span>@OUCC</span>
   </span>
 </LinkButton>
diff --git a/src/features/activity/components/ActivityCard.astro b/src/features/activity/components/ActivityCard.astro
@@ -15,9 +15,7 @@ const { title, image, link } = Astro.props
 
 <div class="flex flex-col gap-2.5">
   <h3 class="flex gap-2.5 text-2xl font-bold">
-    <span class="w-8">
-      <Icon name="timeline" alt="" />
-    </span>
+    <Icon name="timeline" alt="" class="w-8" />
     <span>{title}</span>
   </h3>
   {

diff --git a/src/features/index/components/about/AboutSection.astro b/src/features/index/components/about/AboutSection.astro
@@ -43,9 +43,7 @@ const items: Item[] = [
       items.map(({ icon, description }) => (
         <li class="flex-1 max-w-[32rem]">
           <AboutCard>
-            <div slot="icon" class="w-20 h-20 grid place-items-center">
-              <Icon name={icon} alt="" />
-            </div>
+            <Icon slot="icon" name={icon} alt="" class="w-20 h-20" />
             {description.map((x) => (
               <p>{x}</p>
             ))}

diff --git a/src/features/layout/components/Footer.astro b/src/features/layout/components/Footer.astro
@@ -5,9 +5,7 @@ import FooterLink from './FooterLink.astro'
 
 <footer class="py-8 flex flex-wrap justify-center items-center gap-8">
   <div class="px-4 flex flex-wrap justify-center items-center gap-4">
-    <div class="w-12">
-      <Icon name="oucc" alt="OUCC" />
-    </div>
+    <Icon name="oucc" alt="OUCC" class="w-12" />
     <span class="text-sm">© 2023 大阪大学コンピュータクラブ</span>
   </div>
   <div class="px-4 flex flex-wrap justify-center items-center gap-4">

diff --git a/src/features/layout/components/nav/Header.astro b/src/features/layout/components/nav/Header.astro
@@ -16,14 +16,16 @@ const { showJoinLink = false } = Astro.props
   <div class="flex">
     <button
       id="navigation-dialog-open"
-      class="mx-5 w-5 flex items-center text-slate-500"
+      class="mx-5 flex items-center text-slate-500"
     >
-      <Icon name="hamburger_menu" alt="ナビゲーションメニューを開く" />
+      <Icon
+        name="hamburger_menu"
+        alt="ナビゲーションメニューを開く"
+        class="w-5"
+      />
     </button>
     <a href="/">
-      <div class="h-full aspect-square grid place-items-center">
-        <Icon name="oucc" alt="OUCC" />
-      </div>
+      <Icon name="oucc" alt="OUCC" class="h-full aspect-square" />
     </a>
   </div>
   <div class="flex flex-col justify-center">

diff --git a/src/features/layout/components/nav/Navigation.astro b/src/features/layout/components/nav/Navigation.astro
@@ -5,10 +5,8 @@ import DrWani from './DrWani.astro'
 ---
 
 <nav class="w-full h-full bg-white flex flex-col">
-  <div class="h-24 py-2 flex justify-center">
-    <div class="aspect-square flex">
-      <Icon name="oucc" alt="OUCC" />
-    </div>
+  <div class="py-2 flex justify-center">
+    <Icon name="oucc" alt="OUCC" class="w-20 aspect-square" />
   </div>
   <ul class="flex flex-col text-center">
     <NavigationListItem to="/">トップページ</NavigationListItem>

diff --git a/src/features/workshop/components/WorkshopCard.astro b/src/features/workshop/components/WorkshopCard.astro
@@ -14,9 +14,7 @@ const { title, date, description } = Astro.props
 >
   <h2 class="text-xl font-bold">{title}</h2>
   <p class="flex items-center gap-2 text-slate-600">
-    <span class="w-4">
-      <Icon name="clock" alt="開催日時" />
-    </span>
+    <Icon name="clock" alt="開催日時" class="w-4" />
     <span>{date}</span>
   </p>
   <p class="text-justify-ja">