Merge pull request #49 from OUCC/rewrite-icon

OUCCのロゴを`<Image>`で表示する
OUCC · Dec 5, 2023 · 96e0753 · 96e0753
2 parents 93acd90 + 7a594cd
commit 96e0753
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 16 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/common/Image.astro b/src/components/common/Image.astro
@@ -10,7 +10,7 @@ type Props = Omit<HTMLAttributes<'img'>, 'src' | 'srcset'> & {
 
 const { widths = [3840, 1920, 960, 480, 240], ...attrs } = Astro.props
 
-const { src, attributes } = await getImage(attrs)
+const { src, options, attributes } = await getImage(attrs)
 
 const originalWidth = parseInt(attributes.width, 10)
 const srcset = (
@@ -25,4 +25,14 @@ const srcset = (
 ).join(',')
 ---
 
-<img src={src} srcset=`${src} ${originalWidth}w,${srcset}` {...attributes} />
+{
+  options.format === 'svg' ? (
+    <img src={src} {...attributes} />
+  ) : (
+    <img
+      src={src}
+      srcset={`${src} ${originalWidth}w,${srcset}`}
+      {...attributes}
+    />
+  )
+}
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>

diff --git a/src/pages/blog/[slug]/_OgImageGenerator.ts b/src/pages/blog/[slug]/_OgImageGenerator.ts
@@ -1,5 +1,5 @@
 import satori from 'satori'
-import oucc from '@/assets/icons/oucc.svg?raw'
+import oucc from '@/assets/oucc.svg?raw'
 import fs from 'node:fs/promises'
 import sharp from 'sharp'