使用react-share-social时WhatsApp和Telegram图标不显示

算力阿峰

2026-7-28

问题还原

使用react-share-social开发React分享功能时，Facebook、Twitter、LinkedIn等图标正常显示，但WhatsApp和Telegram图标无法渲染，代码配置如下：

<div style={{ marginTop: "-20px", marginBottom: "15px" }}>
  <ShareSocial
    url={process.browser && window.location.href}
    socialTypes={[
      "facebook",
      "whatsapp",
      "twitter",
      "linkedin",
      "pinterest",
      "instapaper",
      "line",
      "viber",
      "Telegram",
      "mailru"
    ]}
    style={{
      height: "200px",
      background: "none",
    }}
  />
</div>

实际效果中WhatsApp和Telegram位置为空（对应截图显示空白占位）。

解决方案

修正socialTypes的大小写问题
库的socialTypes参数对大小写敏感，代码中的"Telegram"首字母大写，不符合库的枚举值规范，需改为全小写的"telegram"，这是图标不显示的最常见原因。
更新库版本并检查依赖
旧版本的react-share-social可能存在图标资源缺失的bug，执行以下命令更新到最新版：
```
npm update react-share-social
```
部分版本依赖react-icons提供图标资源，若未安装需补充：
```
npm install react-icons
```

自定义图标组件（兜底方案）
如果自带图标仍无法加载，可通过customIcons属性手动传入第三方图标（以react-icons为例）：

import { FaWhatsapp, FaTelegram } from "react-icons/fa";

// ...

<ShareSocial
  url={process.browser && window.location.href}
  socialTypes={["facebook", "whatsapp", "twitter", "linkedin", "pinterest", "instapaper", "line", "viber", "telegram", "mailru"]}
  style={{ height: "200px", background: "none" }}
  customIcons={{
    whatsapp: <FaWhatsapp style={{ fontSize: 24, color: "#25D366" }} />,
    telegram: <FaTelegram style={{ fontSize: 24, color: "#0088CC" }} />
  }}
/>