fix(perf): logo svgを外部参照方式に変更

saitamau-maximum · Apr 14, 2024 · f4dcd4b · f4dcd4b
1 parent bd9e286
commit f4dcd4b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/packages/components/.storybook/main.ts b/packages/components/.storybook/main.ts
@@ -14,6 +14,7 @@ const config = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../public'],
   core: {
     builder: '@storybook/builder-vite',
   },

diff --git a/packages/components/src/header/logo.svg → packages/components/public/logo.svg b/packages/components/src/header/logo.svg → packages/components/public/logo.svg
diff --git a/packages/components/src/header/Header.stories.tsx b/packages/components/src/header/Header.stories.tsx
@@ -59,19 +59,19 @@ const NAVIGATIONS = [
 
 export const Light = () => (
   <Container theme="light">
-    <Header navigations={NAVIGATIONS} />
+    <Header navigations={NAVIGATIONS} iconSrc="/logo.svg" />
   </Container>
 );
 
 export const Dark = () => (
   <Container theme="dark">
-    <Header navigations={NAVIGATIONS} />
+    <Header navigations={NAVIGATIONS} iconSrc="/logo.svg" />
   </Container>
 );
 
 export const DropdownOpenLight = () => (
   <Container theme="light">
-    <Header navigations={NAVIGATIONS} dropdownOpen>
+    <Header navigations={NAVIGATIONS} iconSrc="/logo.svg" dropdownOpen>
       <Button leftIcon={<User />} variant="tertiary" />
       <Button leftIcon={<Menu />} variant="tertiary" />
     </Header>
@@ -80,7 +80,7 @@ export const DropdownOpenLight = () => (
 
 export const DropdownOpenDark = () => (
   <Container theme="dark">
-    <Header navigations={NAVIGATIONS} dropdownOpen>
+    <Header navigations={NAVIGATIONS} iconSrc="/logo.svg" dropdownOpen>
       <Button leftIcon={<User />} variant="tertiary" />
       <Button leftIcon={<Menu />} variant="tertiary" />
     </Header>

diff --git a/packages/components/src/header/Header.tsx b/packages/components/src/header/Header.tsx
@@ -4,7 +4,6 @@ import { ArrowUpRight, X } from 'react-feather';
 import { Button } from '../button';
 
 import styles from './Header.module.scss';
-import logo from './logo.svg';
 
 type NavigationItem = {
   name: string;
@@ -31,6 +30,7 @@ export interface HeaderProps {
   navigations: NavigationItem[];
   children?: React.ReactNode;
   link?: LinkComponent;
+  iconSrc: string;
   dropdownOpen?: boolean;
   dropdownChildren?: React.ReactNode;
   onDropdownClose?: () => void;
@@ -40,6 +40,7 @@ export const Header = ({
   navigations,
   children,
   link,
+  iconSrc,
   dropdownOpen,
   dropdownChildren,
   onDropdownClose,
@@ -54,7 +55,7 @@ export const Header = ({
         <div className={styles.headerInner}>
           <nav className={styles.nav}>
             <Link to="/" href="/" className={styles.logoLink}>
-              <img className={styles.logo} src={logo} alt="Maximum Logo" />
+              <img className={styles.logo} src={iconSrc} alt="Maximum Logo" />
             </Link>
             <ul className={styles.navList}>
               {navigations.map((nav) => (