SocialIcon

Introduction

The SocialIcon component is used to display social media platform icons, supporting various common social media platforms. It provides consistent styling and interactive effects while supporting custom sizes and colors. This component is suitable for scenarios where you need to display social media links or brand identities in your interface.

Examples

---
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

Customize the style class name of the social icon through the class attribute.

---
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

Customize the color of the social icon through the color attribute.

---
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

Specify the social media platform to display through the platform attribute.

---
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

Control the size of the social icon through the size attribute.

---
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" />

Use Cases

Display social media link icons at the bottom or sidebar of your website, allowing users to click and navigate to corresponding social media pages.

Brand Display

Show social media brand identities on brand introduction or about us pages to enhance brand recognition.

Provide social media sharing buttons on article or product pages for convenient content sharing.

Design Philosophy

Clear and Simple - Use clear and recognizable icons to represent social media platforms
Consistency - Maintain unified styling and interactive effects
Customizability - Support custom sizes, colors, and styles
Accessibility - Provide appropriate aria labels to ensure screen readers can identify them