@wecode-team/social-links

We0 社交媒体链接组件 —— 官网页脚社交图标栏，支持微博/知乎/小红书/抖音/B站。hover 自动变品牌色，开箱即用。

安装

npm install @wecode-team/social-links
# 或
pnpm add @wecode-team/social-links
# 或
yarn add @wecode-team/social-links

需要 React >= 18 作为 peerDependency。

快速开始

import { SocialLinks } from "@wecode-team/social-links"

function Footer() {
  return (
    <footer>
      <SocialLinks
        links={[
          { platform: "weibo", url: "https://weibo.com/we0official" },
          { platform: "zhihu", url: "https://zhihu.com/org/we0" },
          { platform: "bilibili", url: "https://space.bilibili.com/123456" },
        ]}
      />
    </footer>
  )
}

支持平台

| 平台 | platform 值 | 品牌色 | 链接格式示例 | |------|------------|--------|-------------| | 微博 | weibo | #E6162D | https://weibo.com/{id} | | 知乎 | zhihu | #0066FF | https://zhihu.com/org/{id} | | 小红书 | xiaohongshu | #FF2442 | https://xiaohongshu.com/user/profile/{id} | | 抖音 | douyin | #000000 | https://douyin.com/user/{id} | | 哔哩哔哩 | bilibili | #00A1D6 | https://space.bilibili.com/{uid} |

API

<SocialLinks />

主组件，渲染一排社交媒体图标。

<SocialLinks
  links={[
    { platform: "weibo", url: "https://weibo.com/we0official" },
    { platform: "zhihu", url: "https://zhihu.com/org/we0" },
    { platform: "xiaohongshu", url: "https://xiaohongshu.com/user/profile/xxx" },
    { platform: "douyin", url: "https://douyin.com/user/xxx" },
    { platform: "bilibili", url: "https://space.bilibili.com/123456" },
  ]}
  size={24}
  gap={16}
  color="#999"
  hoverColor="#fff"
  layout="horizontal"
  target="_blank"
/>

Props：

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | links | SocialLink[] | 必填 | 社交链接列表 | | size | number | 24 | 图标尺寸（px） | | gap | number | 16 | 图标间距（px） | | color | string | "#999" | 默认图标颜色 | | hoverColor | string | 各平台品牌色 | hover 时的颜色 | | layout | "horizontal" \| "vertical" | "horizontal" | 排列方向 | | target | "_blank" \| "_self" | "_blank" | 链接打开方式 | | className | string | — | 自定义 CSS class | | style | CSSProperties | — | 自定义内联样式 |

SocialLink 类型：

interface SocialLink {
  platform: "weibo" | "zhihu" | "xiaohongshu" | "douyin" | "bilibili"
  url: string
  label?: string  // 自定义 aria-label，默认使用平台中文名
}

<SocialIcon />

单个社交图标组件，可独立使用。

import { SocialIcon } from "@wecode-team/social-links"

<SocialIcon platform="weibo" url="https://weibo.com/we0official" size={32} />

Props：

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | platform | Platform | 必填 | 平台标识 | | url | string | 必填 | 跳转链接 | | label | string | 平台中文名 | 自定义 aria-label | | size | number | 24 | 图标尺寸（px） | | color | string | "#999" | 默认颜色 | | hoverColor | string | 平台品牌色 | hover 颜色 | | target | "_blank" \| "_self" | "_blank" | 链接打开方式 |

图标组件

每个平台图标可单独导入使用：

import { WeiboIcon, ZhihuIcon, XiaohongshuIcon, DouyinIcon, BilibiliIcon } from "@wecode-team/social-links"

<WeiboIcon size={24} color="#E6162D" />
<ZhihuIcon size={24} color="#0066FF" />
<XiaohongshuIcon size={24} color="#FF2442" />
<DouyinIcon size={24} color="#000" />
<BilibiliIcon size={24} color="#00A1D6" />

工具函数

import { platformMeta, getPlatformName, getPlatformColor } from "@wecode-team/social-links"

getPlatformName("weibo")    // "微博"
getPlatformColor("bilibili") // "#00A1D6"

// 所有平台元信息
platformMeta.zhihu // { name: "知乎", brandColor: "#0066FF" }

使用示例

官网页脚（深色背景）

<footer style={{ background: "#1a1a2e", padding: "40px 0" }}>
  <div style={{ textAlign: "center" }}>
    <p style={{ color: "#666", marginBottom: 16 }}>关注我们</p>
    <SocialLinks
      links={[
        { platform: "weibo", url: "https://weibo.com/we0official" },
        { platform: "zhihu", url: "https://zhihu.com/org/we0" },
        { platform: "bilibili", url: "https://space.bilibili.com/123456" },
      ]}
      color="#666"
      size={20}
      gap={24}
    />
  </div>
</footer>

侧边栏垂直排列

<div style={{ position: "fixed", right: 16, top: "50%", transform: "translateY(-50%)" }}>
  <SocialLinks
    links={[
      { platform: "weibo", url: "https://weibo.com/we0official" },
      { platform: "xiaohongshu", url: "https://xiaohongshu.com/user/profile/xxx" },
      { platform: "douyin", url: "https://douyin.com/user/xxx" },
    ]}
    layout="vertical"
    size={20}
    gap={20}
    color="#bbb"
  />
</div>

统一 hover 颜色（不使用品牌色）

<SocialLinks
  links={links}
  color="#999"
  hoverColor="#fff"
/>

环境兼容性

• React >= 18
• Next.js / Remix / Vite 等主流 React 框架
• SSR 友好（纯 CSS hover 通过 inline style + useState 实现）

License

MIT