diff --git a/apps/web/app/components/GlobalHeader.vue b/apps/web/app/components/GlobalHeader.vue index 789791b7..65637491 100644 --- a/apps/web/app/components/GlobalHeader.vue +++ b/apps/web/app/components/GlobalHeader.vue @@ -42,13 +42,13 @@ const toggleMenu = () => { - + diff --git a/apps/web/app/components/TopPageSection.vue b/apps/web/app/components/TopPageSection.vue index 741d47c2..b2752418 100644 --- a/apps/web/app/components/TopPageSection.vue +++ b/apps/web/app/components/TopPageSection.vue @@ -29,7 +29,7 @@ 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 @@ -37,7 +37,7 @@ const { locale } = useI18n() 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') }} diff --git a/packages/model/lib/icon.ts b/packages/model/lib/icon.ts index 37de2561..241701c6 100644 --- 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 new file mode 100644 index 00000000..ddda34d6 --- /dev/null +++ b/packages/ui/assets/icon/external_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/ui/assets/icon/facebook_icon.svg b/packages/ui/assets/icon/facebook_icon.svg new file mode 100644 index 00000000..267f238f --- /dev/null +++ b/packages/ui/assets/icon/facebook_icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/ui/assets/icon/note_22_icon.svg b/packages/ui/assets/icon/note_22_icon.svg deleted file mode 100644 index 56a13dae..00000000 --- a/packages/ui/assets/icon/note_22_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/ui/assets/icon/note_icon.svg b/packages/ui/assets/icon/note_icon.svg index 4dd70d2e..56a13dae 100644 --- a/packages/ui/assets/icon/note_icon.svg +++ b/packages/ui/assets/icon/note_icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/assets/icon/x_22_icon.svg b/packages/ui/assets/icon/x_22_icon.svg deleted file mode 100644 index 9039d10c..00000000 --- a/packages/ui/assets/icon/x_22_icon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/ui/assets/icon/x_40_icon.svg b/packages/ui/assets/icon/x_40_icon.svg new file mode 100644 index 00000000..52692610 --- /dev/null +++ b/packages/ui/assets/icon/x_40_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/assets/icon/x_icon.svg b/packages/ui/assets/icon/x_icon.svg index fa98528c..9039d10c 100644 --- a/packages/ui/assets/icon/x_icon.svg +++ b/packages/ui/assets/icon/x_icon.svg @@ -1,10 +1,10 @@ - - - + + + - - + + diff --git a/packages/ui/components/icon/Icon.stories.ts b/packages/ui/components/icon/Icon.stories.ts index 1fa9ecd7..22626035 100644 --- a/packages/ui/components/icon/Icon.stories.ts +++ b/packages/ui/components/icon/Icon.stories.ts @@ -30,14 +30,52 @@ const Template: StoryFn = (args, { argTypes }) => ({ setup() { return { args } }, - template: `
- - - - - - - + template: `
+

X

+
+ + + + +
+

Facebook

+
+ +
+

note

+
+ +
+

YouTube

+
+ +
+

GitHub

+
+ + + +
+

Google

+
+ +
+

Menu

+
+ +
+

Close

+
+ +
+

External

+
+ +
+

Alert

+
+ +
`, }) diff --git a/packages/ui/components/icon/Icon.vue b/packages/ui/components/icon/Icon.vue index cab0412d..fe7cc063 100644 --- a/packages/ui/components/icon/Icon.vue +++ b/packages/ui/components/icon/Icon.vue @@ -15,19 +15,21 @@ const props = withDefaults(defineProps(), { }) const svgComponent = match(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(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(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()