diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md index b1b63151..1d08d944 100644 --- a/docs/config/theme-configs.md +++ b/docs/config/theme-configs.md @@ -130,7 +130,6 @@ interface SidebarItem { } ``` - ## outlineTitle - Type: `string` @@ -148,7 +147,7 @@ export default { ## socialLinks -- Type: `SocialLink` +- Type: `SocialLink[]` You may define this option to show your social account links with icons in nav. @@ -158,7 +157,13 @@ export default { socialLinks: [ { icon: 'github', link: 'https://github.com/vuejs/vitepress' }, { icon: 'twitter', link: '...' }, - { icon: 'discord', link: '...' } + // You can also add custom icons by passing SVG as string: + { + icon: { + svg: 'Dribbble' + }, + link: '...' + } ] } } @@ -179,6 +184,7 @@ type SocialLinkIcon = | 'slack' | 'twitter' | 'youtube' + | { svg: string } ``` ## footer diff --git a/src/client/theme-default/components/VPSocialLink.vue b/src/client/theme-default/components/VPSocialLink.vue index 53a6153c..2628ae2a 100644 --- a/src/client/theme-default/components/VPSocialLink.vue +++ b/src/client/theme-default/components/VPSocialLink.vue @@ -1,41 +1,27 @@ @@ -47,15 +33,15 @@ const icons = { width: 36px; height: 36px; color: var(--vp-c-text-2); - transition: color .5s; + transition: color 0.5s; } .VPSocialLink:hover { color: var(--vp-c-text-1); - transition: color .25s; + transition: color 0.25s; } -.icon { +.VPSocialLink > :deep(svg) { width: 20px; height: 20px; fill: currentColor; diff --git a/src/client/theme-default/components/icons/VPIconDiscord.vue b/src/client/theme-default/components/icons/VPIconDiscord.vue deleted file mode 100644 index 59174574..00000000 --- a/src/client/theme-default/components/icons/VPIconDiscord.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/client/theme-default/components/icons/VPIconFacebook.vue b/src/client/theme-default/components/icons/VPIconFacebook.vue deleted file mode 100644 index 6d9b6740..00000000 --- a/src/client/theme-default/components/icons/VPIconFacebook.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/client/theme-default/components/icons/VPIconGitHub.vue b/src/client/theme-default/components/icons/VPIconGitHub.vue deleted file mode 100644 index ef59cdab..00000000 --- a/src/client/theme-default/components/icons/VPIconGitHub.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/client/theme-default/components/icons/VPIconInstagram.vue b/src/client/theme-default/components/icons/VPIconInstagram.vue deleted file mode 100644 index 2b77d52c..00000000 --- a/src/client/theme-default/components/icons/VPIconInstagram.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/client/theme-default/components/icons/VPIconLinkedIn.vue b/src/client/theme-default/components/icons/VPIconLinkedIn.vue deleted file mode 100644 index 75b321fd..00000000 --- a/src/client/theme-default/components/icons/VPIconLinkedIn.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/client/theme-default/components/icons/VPIconSlack.vue b/src/client/theme-default/components/icons/VPIconSlack.vue deleted file mode 100644 index 9a1896ce..00000000 --- a/src/client/theme-default/components/icons/VPIconSlack.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/client/theme-default/components/icons/VPIconTwitter.vue b/src/client/theme-default/components/icons/VPIconTwitter.vue deleted file mode 100644 index 53250404..00000000 --- a/src/client/theme-default/components/icons/VPIconTwitter.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/client/theme-default/components/icons/VPIconYouTube.vue b/src/client/theme-default/components/icons/VPIconYouTube.vue deleted file mode 100644 index f5bc35a0..00000000 --- a/src/client/theme-default/components/icons/VPIconYouTube.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/client/theme-default/support/socialIcons.ts b/src/client/theme-default/support/socialIcons.ts new file mode 100644 index 00000000..90fb19ab --- /dev/null +++ b/src/client/theme-default/support/socialIcons.ts @@ -0,0 +1,20 @@ +// Used under CC0 1.0 from https://simpleicons.org/ + +export const icons = { + discord: + 'Discord', + facebook: + 'Facebook', + github: + 'GitHub', + instagram: + 'Instagram', + linkedin: + 'LinkedIn', + slack: + 'Slack', + twitter: + 'Twitter', + youtube: + 'YouTube' +} as const diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts index 2faa0889..2f1148b8 100644 --- a/types/default-theme.d.ts +++ b/types/default-theme.d.ts @@ -196,6 +196,7 @@ export namespace DefaultTheme { | 'slack' | 'twitter' | 'youtube' + | { svg: string } // footer --------------------------------------------------------------------