logo
简体中文

导航菜单

文档

SocialIcon

简介

SocialIcon 组件用于显示社交媒体平台的图标，支持多种常见的社交媒体平台。它提供了一致的样式和交互效果，同时支持自定义大小和颜色。该组件适用于需要在界面中展示社交媒体链接或品牌标识的场景。

案例

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="32px" color="#333" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="twitter" size="32px" color="#1da1f2" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="linkedin" size="32px" color="#0077b5" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="facebook" size="32px" color="#1877f2" />

Props

class

通过 class 属性自定义社交图标的样式类名。

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon
  platform="github"
  size="32px"
  color="#333"
  class="custom-social-icon"
/>

<style>
  .custom-social-icon {
    border-radius: 8px;
    padding: 8px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
  }

  .custom-social-icon:hover {
    background-color: #e9ecef;
    transform: scale(1.1);
  }
</style>

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon
  platform="twitter"
  size="32px"
  color="#1da1f2"
  class="custom-social-icon"
/>

<style>
  .custom-social-icon {
    border-radius: 8px;
    padding: 8px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
  }

  .custom-social-icon:hover {
    background-color: #e9ecef;
    transform: scale(1.1);
  }
</style>

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon
  platform="linkedin"
  size="32px"
  color="#0077b5"
  class="custom-social-icon"
/>

<style>
  .custom-social-icon {
    border-radius: 8px;
    padding: 8px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
  }

  .custom-social-icon:hover {
    background-color: #e9ecef;
    transform: scale(1.1);
  }
</style>

color

通过 color 属性自定义社交图标的颜色。

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="24px" color="#333" /> 

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="24px" color="#0366d6" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="24px" color="#28a745" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="24px" color="#d73a49" />

platform

通过 platform 属性指定要显示的社交媒体平台。

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="32px" color="#333" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="twitter" size="32px" color="#1da1f2" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="linkedin" size="32px" color="#0077b5" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="facebook" size="32px" color="#1877f2" />

size

通过 size 属性控制社交图标的大小。

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="16px" color="#333" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="24px" color="#333" />

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="32px" color="#333" /> 

---
import { SocialIcon } from '@coffic/cosy-ui';
---

<SocialIcon platform="github" size="48px" color="#333" />

搜索