| 1 | import type { SVGProps } from "react"; |
| 2 | |
| 3 | // 渠道品牌图标：全部使用 currentColor，跟随主题色。 |
| 4 | // 路径来源： |
| 5 | // - QQ / 微信：simple-icons（CC0，官方路径数据，node_modules/simple-icons/icons/） |
| 6 | // - 钉钉：Ant Design Icons 收录的 dingtalk 品牌图形（Apache-2.0） |
| 7 | // - 飞书：字节跳动 IconPark 收录的 new-lark 品牌图形（Apache-2.0） |
| 8 | // 统一内联为 React 组件而非 <img src>，是为了能用 currentColor 跟随主题。 |
| 9 | |
| 10 | type ChannelIconProps = SVGProps<SVGSVGElement>; |
| 11 | |
| 12 | export function QqIcon(props: ChannelIconProps) { |
| 13 | return ( |
| 14 | <svg viewBox="0 0 24 24" aria-hidden="true" {...props}> |
| 15 | <path |
| 16 | fill="currentColor" |
| 17 | d="M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673" |
| 18 | /> |
| 19 | </svg> |
| 20 | ); |
| 21 | } |
| 22 | |
| 23 | export function WechatIcon(props: ChannelIconProps) { |
| 24 | return ( |
| 25 | <svg viewBox="0 0 24 24" aria-hidden="true" {...props}> |
| 26 | <path |
| 27 | fill="currentColor" |
| 28 | d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z" |
| 29 | /> |
| 30 | </svg> |
| 31 | ); |
| 32 | } |
| 33 | |
| 34 | export function DingtalkIcon(props: ChannelIconProps) { |
| 35 | return ( |
| 36 | <svg viewBox="0 0 1024 1024" aria-hidden="true" {...props}> |
| 37 | <path |
| 38 | fill="currentColor" |
| 39 | d="M573.7 252.5C422.5 197.4 201.3 96.7 201.3 96.7c-15.7-4.1-17.9 11.1-17.9 11.1c-5 61.1 33.6 160.5 53.6 182.8c19.9 22.3 319.1 113.7 319.1 113.7S326 357.9 270.5 341.9c-55.6-16-37.9 17.8-37.9 17.8c11.4 61.7 64.9 131.8 107.2 138.4c42.2 6.6 220.1 4 220.1 4s-35.5 4.1-93.2 11.9c-42.7 5.8-97 12.5-111.1 17.8c-33.1 12.5 24 62.6 24 62.6c84.7 76.8 129.7 50.5 129.7 50.5c33.3-10.7 61.4-18.5 85.2-24.2L565 743.1h84.6L603 928l205.3-271.9H700.8l22.3-38.7c.3.5.4.8.4.8S799.8 496.1 829 433.8l.6-1h-.1c5-10.8 8.6-19.7 10-25.8c17-71.3-114.5-99.4-265.8-154.5" |
| 40 | /> |
| 41 | </svg> |
| 42 | ); |
| 43 | } |
| 44 | |
| 45 | export function FeishuIcon(props: ChannelIconProps) { |
| 46 | return ( |
| 47 | <svg viewBox="0 0 48 48" aria-hidden="true" {...props}> |
| 48 | <path |
| 49 | fill="currentColor" |
| 50 | fillRule="evenodd" |
| 51 | clipRule="evenodd" |
| 52 | d="M41.0716 5.99409L3.31071 16.5187L12.3856 25.8126L20.7998 25.9594L30.4827 16.5187C30.2266 15.9943 30.0985 15.5552 30.0985 15.2013C30.0985 14.4074 30.4104 13.7786 30.8947 13.333C31.7241 12.57 32.7222 12.4558 33.8889 12.9905L41.0716 5.99409Z" |
| 53 | /> |
| 54 | <path |
| 55 | fill="currentColor" |
| 56 | fillRule="evenodd" |
| 57 | clipRule="evenodd" |
| 58 | d="M42.1021 6.72842L31.5775 44.4893L22.2836 35.4144L22.1367 27.0002L31.5115 17.4816C32.0195 17.8454 32.5743 18.0105 33.1759 17.9769C34.0784 17.9264 34.6614 17.3813 34.9349 17.0602C35.2083 16.7392 35.5293 16.2051 35.5025 15.4113C35.4847 14.8821 35.3109 14.3941 34.9812 13.9472L42.1021 6.72842Z" |
| 59 | /> |
| 60 | </svg> |
| 61 | ); |
| 62 | } |
| 63 | |
| 64 | // 渠道 target → 品牌图标映射（跟随主题色，由调用方通过 color/currentColor 控制）。 |
| 65 | export const CHANNEL_ICONS = { |
| 66 | qq: QqIcon, |
| 67 | weixin: WechatIcon, |
| 68 | dingtalk: DingtalkIcon, |
| 69 | feishu: FeishuIcon, |
| 70 | lark: FeishuIcon, |
| 71 | } as const; |
| 72 |