logo
简体中文

导航菜单

文档

Icons

简介

Icons 组件库提供了一套完整的 Astro 图标组件，基于 SVG 图标构建，支持自定义大小、颜色和样式。所有图标都经过精心设计，确保在不同尺寸下都能保持清晰和美观。该组件库适用于需要丰富视觉元素的应用，如仪表盘、导航菜单、操作按钮等场景。

Props

class

通过 class 属性自定义图标的 CSS 类名，用于覆盖默认样式。

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

通过 color 属性自定义图标的颜色，支持任何有效的 CSS 颜色值。

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

<UserIcon size="32px" />

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

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

size

通过 size 属性自定义图标的大小，支持任何有效的 CSS 尺寸值。

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

图标组件不提供内容插槽，所有内容通过 SVG 路径数据渲染。

特殊图标

SocialIcon

社交平台图标组件，支持多种社交平台的图标显示。通过 platform 属性指定要显示的社交平台。

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

智能图标组件，具有独特的视觉设计，适用于表示智能、科技相关的功能。

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

所有图标

展示所有可用的 Astro 图标组件。

AlertTriangle

AppStoreIcon

CalendarIcon

ChartIcon

CheckIcon

CheckCircle

ChevronDownIcon

ChevronLeftIcon

ChevronRightIcon

ClipboardIcon

CloseIcon

CodeIcon

DashboardIcon

DeleteIcon

DocumentIcon

DownloadIcon

EditIcon

ErrorIcon

FacebookIcon

FolderIcon

GithubIcon

GlobeIcon

HeartIcon

HomeIcon

IPhoneBatteryIcon

IPhoneSignalIcon

IPhoneWifiIcon

InfoCircle

InfoIcon

InboxArchive

LinkIcon

LinkedinIcon

LogOut

MailIcon

MapPinIcon

MenuIcon

MessageIcon

NotificationIcon

PhoneIcon

RefreshIcon

ReportIcon

SaveIcon

SearchIcon

SecurityIcon

SettingsIcon

StarIcon

SuccessIcon

SunCloudyIcon

ToolsIcon

TwitterIcon

UploadIcon

UserIcon

UsersIcon

ViewIcon

WalletIcon

WarningIcon

WebsiteIcon

XCircle

搜索