OUCCのロゴは<Icon>ではなく<Image>で表示する

OUCC · Dec 5, 2023 · fa023e9 · fa023e9
1 parent 1f5d88f
commit fa023e9
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 13 deletions.
diff --git a/src/assets/icons/oucc.svg → src/assets/oucc.svg b/src/assets/icons/oucc.svg → src/assets/oucc.svg
diff --git a/src/components/index/about/AboutSection.astro b/src/components/index/about/AboutSection.astro
@@ -1,16 +1,19 @@
 ---
+import type { ImageMetadata } from 'astro'
 import Section from '@/components/common/Section.astro'
 import Icon from '@/components/common/Icon.astro'
+import Image from '@/components/common/Image.astro'
+import ouccImage from '@/assets/oucc.svg'
 import AboutCard from './AboutCard.astro'
 
 interface Item {
-  icon: string
+  icon: string | ImageMetadata
   description: string[]
 }
 
 const items: Item[] = [
   {
-    icon: 'oucc',
+    icon: ouccImage,
     description: [
       'OUCC（大阪大学コンピュータクラブ）は、コンピュータを使ったものづくりに関心を持つ学生が交流するサークルです。',
       'プログラミングやお絵描き、3Dモデリングなどの活動を行っています。',
@@ -43,7 +46,13 @@ const items: Item[] = [
       items.map(({ icon, description }) => (
         <li class="flex-1 max-w-[32rem] flex items-stretch">
           <AboutCard>
-            <Icon slot="icon" name={icon} alt="" class="w-20 h-20" />
+            <Fragment slot="icon">
+              {typeof icon === 'string' ? (
+                <Icon name={icon} alt="" class="w-20 h-20" />
+              ) : (
+                <Image src={icon} alt="" class="w-20 h-20 object-contain" />
+              )}
+            </Fragment>
             {description.map((x) => (
               <p>{x}</p>
             ))}

diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
@@ -1,11 +1,12 @@
 ---
-import Icon from '@/components/common/Icon.astro'
+import Image from '@/components/common/Image.astro'
+import ouccImage from '@/assets/oucc.svg'
 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">
-    <Icon name="oucc" alt="OUCC" class="w-12" />
+    <Image src={ouccImage} 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/components/layout/nav/Header.astro b/src/components/layout/nav/Header.astro
@@ -1,5 +1,7 @@
 ---
 import Icon from '@/components/common/Icon.astro'
+import Image from '@/components/common/Image.astro'
+import ouccImage from '@/assets/oucc.svg'
 import LinkButton from '@/components/common/button/LinkButton.astro'
 import Navigation from './Navigation.astro'
 
@@ -38,11 +40,9 @@ const {
       />
     </button>
     <a href={rootPath} class="flex items-center">
-      <Icon
-        name="oucc"
-        alt="OUCC"
-        class="block max-h-full min-h-full h-16 aspect-square"
-      />
+      <span class="h-full aspect-square">
+        <Image src={ouccImage} alt="OUCC" class="h-full object-contain" />
+      </span>
       {headerTitle && <h1 class="text-4xl font-bold mx-4">{headerTitle}</h1>}
     </a>
   </div>

diff --git a/src/components/layout/nav/Navigation.astro b/src/components/layout/nav/Navigation.astro
@@ -1,12 +1,13 @@
 ---
-import Icon from '@/components/common/Icon.astro'
+import Image from '@/components/common/Image.astro'
+import ouccImage from '@/assets/oucc.svg'
 import NavigationListItem from './NavigationListItem.astro'
 import DrWani from './DrWani.astro'
 ---
 
 <nav class="w-full h-full bg-white flex flex-col">
   <div class="py-2 flex justify-center">
-    <Icon name="oucc" alt="OUCC" class="w-20 aspect-square" />
+    <Image src={ouccImage} alt="OUCC" class="w-20 h-20 object-contain" />
   </div>
   <ul class="flex flex-col text-center">
     <NavigationListItem to="/">トップページ</NavigationListItem>