feat(theme): add attr name for navbar social icon (#249)

docs/notes/theme/config/主题配置.md

@@ -341,15 +341,19 @@ export default {
   - `'douban'`
   - `'steam'`
   - `'xbox'`
-  - `{ svg: string }`: 自定义图标，传入 svg 字符串
+  - `{ svg: string, name?: string }`: 自定义图标，传入 svg 源码字符串，可选 `name` 字段，用于配置 [`navbarSocialInclude`](#navbarsocialinclude)
 
 示例：
 
-``` ts
+``` ts :no-line-numbers
 export default {
   theme: plumeTheme({
     social: [
-      { icon: 'github', link: 'https://github.com/zhangsan' }
+      { icon: 'github', link: 'https://github.com/zhangsan' },
+      {
+        icon: { svg: '<svg>xxxxx</svg>', name: 'xxx' },
+        link: 'https://xxx.com'
+      },
     ]
   })
 }
@@ -364,6 +368,8 @@ export default {
     允许显示在导航栏的社交链接。
     该配置仅在 PC 端下有效。
 
+    如果 [`social`](#social) 配置为 `{ svg: string, name: string}` 则可将 `name` 作为 `navbarSocialInclude` 的值。
+
 ### navbar
 
 - 类型： `NavItem[]`

theme/src/client/components/Nav/VPNavBarExtra.vue

@@ -14,9 +14,13 @@ const social = computed(() => {
   if (!includes.length)
     return theme.value.social
 
-  return theme.value.social?.filter(
-    ({ icon }) => typeof icon === 'string' && includes.includes(icon),
-  )
+  return theme.value.social?.filter(({ icon }) => {
+    if (typeof icon === 'string')
+      return includes.includes(icon)
+    if (icon.name)
+      return includes.includes(icon.name)
+    return false
+  })
 })
 
 const hasExtraContent = computed(

theme/src/client/components/Nav/VPNavBarSocialLinks.vue

@@ -10,9 +10,13 @@ const social = computed(() => {
   if (!includes.length)
     return theme.value.social
 
-  return theme.value.social?.filter(
-    ({ icon }) => typeof icon === 'string' && includes.includes(icon),
-  )
+  return theme.value.social?.filter(({ icon }) => {
+    if (typeof icon === 'string')
+      return includes.includes(icon)
+    if (icon.name)
+      return includes.includes(icon.name)
+    return false
+  })
 })
 </script>
 

theme/src/shared/base.ts

@@ -39,7 +39,7 @@ export type SocialLinkIconUnion =
   | 'stackoverflow'
   | 'xbox'
 
-export type SocialLinkIcon = SocialLinkIconUnion | { svg: string }
+export type SocialLinkIcon = SocialLinkIconUnion | { svg: string, name?: string }
 
 export interface PresetLocale {
   home: string

theme/src/shared/options/locale.ts

@@ -59,7 +59,7 @@ export interface PlumeThemeLocaleData extends LocaleData {
    * 允许显示在导航栏的社交类型
    * @default - ['github', 'twitter', 'discord', 'facebook']
    */
-  navbarSocialInclude?: SocialLinkIconUnion[]
+  navbarSocialInclude?: (SocialLinkIconUnion | (string & { zz_IGNORE_ME?: never }))[]
 
   /**
    * 博客配置