Merge pull request #207 from vuejs-jp/enhance/facebook-icons-etc

jiyuujin · web-flow · commit 27c11c2516d6 · 2024-07-19T20:31:52.000+09:00
add facebook icon
diff --git a/apps/web/app/components/GlobalHeader.vue b/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">
diff --git a/apps/web/app/components/TopPageSection.vue b/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>
diff --git a/packages/model/lib/icon.ts b/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'
diff --git a/packages/ui/assets/icon/external_icon.svg b/packages/ui/assets/icon/external_icon.svg
@@ -0,0 +1,5 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" transform="translate(0.558594)" fill="white" />
+<path d="M31.9655 2H3V30.9655" stroke="black" stroke-width="2" />
+<rect x="10.0352" y="9.03516" width="26.9655" height="26.9655" fill="white" stroke="black" stroke-width="2" />
+</svg>
diff --git a/packages/ui/assets/icon/facebook_icon.svg b/packages/ui/assets/icon/facebook_icon.svg
@@ -0,0 +1,11 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3607_5078)">
+<path d="M40.5586 20C40.5586 8.9544 31.6042 0 20.5586 0C9.51299 0 0.558594 8.9544 0.558594 20C0.558594 29.3792 7.01619 37.2496 15.7274 39.4112V26.112H11.6034V20H15.7274V17.3664C15.7274 10.5592 18.8082 7.404 25.4914 7.404C26.7586 7.404 28.945 7.6528 29.8394 7.9008V13.4408C29.3674 13.3912 28.5474 13.3664 27.529 13.3664C24.2498 13.3664 22.9826 14.6088 22.9826 17.8384V20H29.5154L28.393 26.112H22.9826V39.8536C32.8858 38.6576 40.5594 30.2256 40.5594 20H40.5586Z" fill="#0866FF" />
+<path d="M28.3931 26.1123L29.5155 20.0003H22.9827V17.8387C22.9827 14.6091 24.2499 13.3667 27.5291 13.3667C28.5475 13.3667 29.3675 13.3915 29.8395 13.4411V7.9011C28.9451 7.6523 26.7587 7.4043 25.4915 7.4043C18.8083 7.4043 15.7275 10.5595 15.7275 17.3667V20.0003H11.6035V26.1123H15.7275V39.4115C17.2747 39.7955 18.8931 40.0003 20.5587 40.0003C21.3787 40.0003 22.1875 39.9499 22.9819 39.8539V26.1123H28.3923H28.3931Z" fill="white" />
+</g>
+<defs>
+<clipPath id="clip0_3607_5078">
+<rect width="40" height="40" fill="white" transform="translate(0.558594)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/ui/assets/icon/note_22_icon.svg b/packages/ui/assets/icon/note_22_icon.svg
diff --git a/packages/ui/assets/icon/note_icon.svg b/packages/ui/assets/icon/note_icon.svg
@@ -1,3 +1,3 @@
-<svg width="15" height="15" viewBox="0 0 15 15"  xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0.0936401C2.88908 0.0936401 6.84571 -0.0529529 9.68639 0.0206945C13.4978 0.11819 14.9301 1.77841 14.9785 5.87953C15.0269 8.19837 14.9785 14.8386 14.9785 14.8386H10.8549C10.8549 9.02883 10.8795 8.07001 10.8549 6.23934C10.8065 4.62822 10.3464 3.86018 9.10844 3.71359C7.79751 3.56699 4.12356 3.68904 4.12356 3.68904V14.8386H0V0.0936401Z" />
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 5.57357C8.27 5.57357 11.3788 5.45839 13.6107 5.51626C16.6054 5.59286 17.7308 6.89733 17.7688 10.1196C17.8068 11.9416 17.7688 17.1589 17.7688 17.1589H14.5289C14.5289 12.5941 14.5482 11.8407 14.5289 10.4023C14.4909 9.13646 14.1293 8.533 13.1566 8.41782C12.1266 8.30264 9.23994 8.39853 9.23994 8.39853V17.1589H6V5.57357Z" />
 </svg>
diff --git a/packages/ui/assets/icon/x_22_icon.svg b/packages/ui/assets/icon/x_22_icon.svg
diff --git a/packages/ui/assets/icon/x_40_icon.svg b/packages/ui/assets/icon/x_40_icon.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.9642 17.2435L36.0778 2H32.9703L21.5838 15.2358L12.4893 2H2L15.7525 22.0148L2 38H5.10769L17.1322 24.0226L26.7366 38H37.2259L22.9634 17.2435H22.9642ZM18.7078 22.1911L17.3144 20.1981L6.22743 4.33942H11.0007L19.948 17.1379L21.3414 19.1309L32.9718 35.767H28.1986L18.7078 22.1919V22.1911Z" />
+</svg>
diff --git a/packages/ui/assets/icon/x_icon.svg b/packages/ui/assets/icon/x_icon.svg
@@ -1,10 +1,10 @@
-<svg width="19" height="19" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_149_55)">
-<path d="M11.0126 8.04107L17.9013 0H16.2689L10.2874 6.98195L5.5101 0H0L7.22428 10.5579L0 18.9902H1.63248L7.94902 11.6171L12.9942 18.9902H18.5043L11.0122 8.04107H11.0126ZM8.77669 10.651L8.04472 9.59963L2.22069 1.23406H4.72809L9.42815 7.98534L10.1601 9.03667L16.2696 17.8123H13.7622L8.77669 10.6514V10.651Z" />
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1268_128)">
+<path d="M13.0813 9.46056L18.4938 3.14258H17.2113L12.5116 8.62839L8.75794 3.14258H4.42857L10.1048 11.4381L4.42857 18.0635H5.71124L10.6742 12.2703L14.6383 18.0635H18.9677L13.081 9.46056H13.0813ZM11.3245 11.5112L10.7494 10.6851L6.1734 4.1122H8.1435L11.8364 9.41677L12.4115 10.2428L17.2119 17.138H15.2418L11.3245 11.5115V11.5112Z" />
 </g>
 <defs>
-<clipPath id="clip0_149_55">
-<rect width="18.5043" height="19" />
+<clipPath id="clip0_1268_128">
+<rect width="14.5391" height="14.9286" transform="translate(4.42857 3.14258)"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/packages/ui/components/icon/Icon.stories.ts b/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>`,
 })
 
diff --git a/packages/ui/components/icon/Icon.vue b/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()
