add facebook icon

apps/web/app/components/GlobalHeader.vue

@@ -42,13 +42,13 @@ const toggleMenu = () => {
       <a
         href=""
         class="navigation-mobile-toggle"
-        name="Menu"
+        name="menu"
         :class="{ 'isOpened': showMenu }"
         @click.prevent="toggleMenu"
       >
         <span /><span /><span />
       </a>
-      <!-- <VFIcon name="Menu" color="vue-blue" can-hover @click="toggleMenu" /> -->
+      <!-- <VFIcon name="menu" color="vue-blue" can-hover @click="toggleMenu" /> -->
     </div>
     <!-- hamburger-menu -->
     <Transition name="slide-down">

apps/web/app/components/TopPageSection.vue

@@ -29,15 +29,15 @@ const { locale } = useI18n()
             class="link-button"
             background-color="vue-green/200"
             color="white"
-            icon-name="x22"
+            icon-name="x"
             href="https://twitter.com/vuefes"
             >@vuefes</VFLinkButton
           >
           <VFLinkButton
             class="link-button"
             background-color="white"
             color="vue-blue"
-            icon-name="note22"
+            icon-name="note"
             href="https://note.com/vuejs_jp/m/mb35849fee631"
             >{{ $t('top_page.note') }}
           </VFLinkButton>

packages/model/lib/icon.ts

@@ -1,14 +1,16 @@
 export type IconName =
   | 'x'
-  | 'x22'
   | 'x24'
+  | 'x40'
+  | 'Facebook40'
   | 'note'
-  | 'note22'
   | 'YouTube'
   | 'GitHub'
   | 'GitHub24'
   | 'GitHub32'
   | 'Google24'
   | 'Google32'
+  | 'menu'
   | 'close'
-  | 'alert32'
+  | 'external'
+  | 'alert'

packages/ui/components/icon/Icon.stories.ts

@@ -30,14 +30,52 @@ const Template: StoryFn<unknown> = (args, { argTypes }) => ({
   setup() {
     return { args }
   },
-  template: `<div style="display: flex; gap: 8px;">
-    <Icon v-bind="args" />
-    <Icon v-bind="args" name="x22" />
-    <Icon v-bind="args" name="note" />
-    <Icon v-bind="args" name="note22" />
-    <Icon v-bind="args" name="YouTube" />
-    <Icon v-bind="args" name="GitHub" />
-    <Icon v-bind="args" name="Menu" />
+  template: `<div style="display: grid; gap: 8px;">
+    <h3>X</h3>
+    <div style="display: flex; gap: 8px;">
+      <Icon v-bind="args" />
+      <Icon v-bind="args" name="x" />
+      <Icon v-bind="args" name="x24" />
+      <Icon v-bind="args" name="x40" />
+    </div>
+    <h3>Facebook</h3>
+    <div style="display: flex; gap: 8px;">
+      <Icon v-bind="args" name="Facebook40" />
+    </div>
+    <h3>note</h3>
+    <div style="display: flex; gap: 8px;">
+      <Icon v-bind="args" name="note" />
+    </div>
+    <h3>YouTube</h3>
+    <div style="display: flex; gap: 8px;">
+      <Icon v-bind="args" name="YouTube" />
+    </div>
+    <h3>GitHub</h3>
+    <div style="display: flex; gap: 8px;">
+      <Icon v-bind="args" name="GitHub" />
+      <Icon v-bind="args" name="GitHub24" />
+      <Icon v-bind="args" name="GitHub32" />
+    </div>
+    <h3>Google</h3>
+    <div style="display: flex; gap: 8px;">
+      <Icon v-bind="args" name="Google24" />
+    </div>
+    <h3>Menu</h3>
+    <div style="display: flex; gap: 8px;">
+      <Icon v-bind="args" name="menu" />
+    </div>
+    <h3>Close</h3>
+    <div style="display: flex; gap: 8px;">
+      <Icon v-bind="args" name="close" />
+    </div>
+    <h3>External</h3>
+    <div style="display: flex; gap: 8px;">
+      <Icon v-bind="args" name="external" />
+     </div>
+    <h3>Alert</h3>
+    <div style="display: flex; gap: 8px;">
+     <Icon v-bind="args" name="alert" />
+    </div>
   </div>`,
 })
 

packages/ui/components/icon/Icon.vue

@@ -15,19 +15,21 @@ const props = withDefaults(defineProps<IconProps>(), {
 })
 
 const svgComponent = match<IconName>(props.name)
-  .with('x', () => defineAsyncComponent(() => import('../../assets/icon/x_icon.svg?component')))
-  .with('x22', () =>
-    defineAsyncComponent(() => import('../../assets/icon/x_22_icon.svg?component')),
+  .with('x', () =>
+    defineAsyncComponent(() => import('../../assets/icon/x_icon.svg?component')),
   )
   .with('x24', () =>
     defineAsyncComponent(() => import('../../assets/icon/x_24_icon.svg?component')),
   )
+  .with('x40', () =>
+    defineAsyncComponent(() => import('../../assets/icon/x_40_icon.svg?component')),
+  )
+  .with('Facebook40', () =>
+    defineAsyncComponent(() => import('../../assets/icon/facebook_icon.svg?component')),
+  )
   .with('note', () =>
     defineAsyncComponent(() => import('../../assets/icon/note_icon.svg?component')),
   )
-  .with('note22', () =>
-    defineAsyncComponent(() => import('../../assets/icon/note_22_icon.svg?component')),
-  )
   .with('YouTube', () =>
     defineAsyncComponent(() => import('../../assets/icon/youtube_icon.svg?component')),
   )
@@ -43,7 +45,7 @@ const svgComponent = match<IconName>(props.name)
   .with('Google24', () =>
     defineAsyncComponent(() => import('../../assets/icon/google_icon.svg?component')),
   )
-  .with('Menu', () =>
+  .with('menu', () =>
     defineAsyncComponent(() => import('../../assets/icon/menu_icon.svg?component')),
   )
   .with('Google32', () =>
@@ -52,7 +54,10 @@ const svgComponent = match<IconName>(props.name)
   .with('close', () =>
     defineAsyncComponent(() => import('../../assets/icon/close_icon.svg?component')),
   )
-  .with('alert32', () =>
+  .with('external', () =>
+    defineAsyncComponent(() => import('../../assets/icon/external_icon.svg?component')),
+  )
+  .with('alert', () =>
     defineAsyncComponent(() => import('../../assets/icon/alert_32_icon.svg?component')),
   )
   .exhaustive()