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: ''
+ },
+ 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 @@
-
- {{ icon }}
@@ -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:
+ '',
+ facebook:
+ '',
+ github:
+ '',
+ instagram:
+ '',
+ linkedin:
+ '',
+ slack:
+ '',
+ twitter:
+ '',
+ 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 --------------------------------------------------------------------