Icons

Introduction

The Icons component library provides a complete set of Astro icon components, built on SVG icons, supporting custom sizes, colors, and styles. All icons are carefully designed to ensure clarity and beauty at different sizes. This component library is suitable for applications that require rich visual elements, such as dashboards, navigation menus, action buttons, and other scenarios.

Props

class

Customize the CSS class name of the icon through the class attribute to override default styles.

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

<UserIcon size="32px" />

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

<UserIcon
  size="32px"
  class="cosy:text-primary cosy:bg-base-200 cosy:p-2 cosy:rounded-lg"
/>

color

Customize the color of the icon through the color attribute, supporting any valid CSS color value.

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

<UserIcon size="32px" />

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

<UserIcon size="32px" color="#3b82f6" />

size

Customize the size of the icon through the size attribute, supporting any valid CSS size value.

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

<UserIcon size="16px" />

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

<UserIcon size="32px" />

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

<UserIcon size="48px" />

Slots

Icon components do not provide content slots, all content is rendered through SVG path data.

Special Icons

SocialIcon

Social platform icon component that supports displaying icons for various social platforms. Use the platform attribute to specify which social platform to display.

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

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

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

<div style="display: flex; gap: 1rem; align-items: center;">
  <SocialIcon platform="github" size="24px" color="#333" />
  <SocialIcon platform="twitter" size="24px" color="#1da1f2" />
  <SocialIcon platform="facebook" size="24px" color="#1877f2" />
  <SocialIcon platform="linkedin" size="24px" color="#0077b5" />
</div>

SmartIcon

Smart icon component with unique visual design, suitable for representing intelligent and technology-related functions.

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

<SmartIcon keyword="用户" size="32px" color="#8b5cf6" />

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

<div style="display: flex; gap: 1rem; align-items: center;">
  <SmartIcon keyword="用户" size="16px" color="#8b5cf6" />
  <SmartIcon keyword="设置" size="24px" color="#8b5cf6" />
  <SmartIcon keyword="搜索" size="32px" color="#8b5cf6" />
  <SmartIcon keyword="文档" size="48px" color="#8b5cf6" />
</div>

All Icons

Display all available Astro icon components.