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"
/>
<script setup lang="ts">
import { UserIcon } from "@coffic/cosy-ui/vue";
/**
* @component ClassBasic
* @description Vue 图标 class 属性基础示例，展示边框样式
*/
</script>
<template>
<UserIcon size="32px" class="cosy:border-2 cosy:border-blue-500 cosy:p-2 cosy:rounded-lg" />
</template>
<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>
<template>
<SmartIcon icon="star" class="custom-class" />
</template>
color
通过 color 属性自定义图标的颜色，支持任何有效的 CSS 颜色值。
---
import { UserIcon } from "@coffic/cosy-ui";
---
<UserIcon size="32px" />
---
import { UserIcon } from "@coffic/cosy-ui";
---
<UserIcon size="32px" color="#3b82f6" />
<script setup lang="ts">
import { UserIcon } from "@coffic/cosy-ui/vue";
/**
* @component ColorRed
* @description Vue 图标红色示例
*/
</script>
<template>
<UserIcon size="32px" color="#ef4444" />
</template>
<script setup lang="ts">
import { UserIcon } from "@coffic/cosy-ui/vue";
/**
* @component ColorPurple
* @description Vue 图标紫色示例
*/
</script>
<template>
<UserIcon size="32px" color="#8b5cf6" />
</template>
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" />
<script setup lang="ts">
import { UserIcon } from "@coffic/cosy-ui/vue";
/**
* @component SizeSmall
* @description Vue 图标小尺寸示例
*/
</script>
<template>
<UserIcon size="16px" />
</template>
<script setup lang="ts">
import { UserIcon } from "@coffic/cosy-ui/vue";
/**
* @component SizeMedium
* @description Vue 图标中等尺寸示例
*/
</script>
<template>
<UserIcon size="32px" />
</template>
<script setup lang="ts">
import { UserIcon } from "@coffic/cosy-ui/vue";
/**
* @component SizeLarge
* @description Vue 图标大尺寸示例
*/
</script>
<template>
<UserIcon size="48px" />
</template>
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
WechatIcon
WebsiteIcon
WhatsappIcon
XCircle
AlertTriangle
AppStore
Calendar
Chart
Check
CheckCircle
ChevronDown
ChevronLeft
ChevronRight
Clipboard
Close
Code
Dashboard
Delete
Document
Download
Edit
Error
Folder
Github
Globe
Heart
Home
IPhoneBattery
IPhoneSignal
IPhoneWifi
InboxArchive
InfoCircle
Info
Link
LogOut
MapPin
Menu
Message
Notification
Phone
Refresh
Report
Save
Search
Security
Settings
Star
Success
SunCloudy
Tools
Upload
User
Users
View
Wallet
Warning
Website
XCircle
---
import {
AlertTriangle,
AppStoreIcon,
CalendarIcon,
ChartIcon,
CheckCircle,
CheckIcon,
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
ClipboardIcon,
CloseIcon,
CodeIcon,
DashboardIcon,
DeleteIcon,
DocumentIcon,
DownloadIcon,
EditIcon,
ErrorIcon,
FacebookIcon,
FolderIcon,
GithubIcon,
GlobeIcon,
HeartIcon,
HomeIcon,
InboxArchive,
InfoCircle,
InfoIcon,
IPhoneBatteryIcon,
IPhoneSignalIcon,
IPhoneWifiIcon,
LinkedinIcon,
LinkIcon,
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,
WechatIcon,
WhatsappIcon,
XCircle,
} from "@coffic/cosy-ui";
---
<div style="padding: 2rem; background-color: #f8f9fa; border-radius: 0.5rem;">
<div
style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem;">
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<AlertTriangle size="32px" color="#f59e0b" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
AlertTriangle
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<AppStoreIcon size="32px" color="#3b82f6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #1a1b1c;">
AppStoreIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<CalendarIcon size="32px" color="#3b82f6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
CalendarIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<ChartIcon size="32px" color="#06b6d4" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
ChartIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<CheckIcon size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
CheckIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<CheckCircle size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
CheckCircle
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<ChevronDownIcon size="32px" color="#6b7280" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
ChevronDownIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<ChevronLeftIcon size="32px" color="#6b7280" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
ChevronLeftIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<ChevronRightIcon size="32px" color="#6b7280" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
ChevronRightIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<ClipboardIcon size="32px" color="#8b5cf6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
ClipboardIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<CloseIcon size="32px" color="#ef4444" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
CloseIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<CodeIcon size="32px" color="#8b5cf6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
CodeIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<DashboardIcon size="32px" color="#3b82f6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
DashboardIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<DeleteIcon size="32px" color="#ef4444" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
DeleteIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<DocumentIcon size="32px" color="#8b5cf6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
DocumentIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<DownloadIcon size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
DownloadIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<EditIcon size="32px" color="#3b82f6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
EditIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<ErrorIcon size="32px" color="#ef4444" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
ErrorIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<FacebookIcon size="32px" color="#1877f2" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
FacebookIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<FolderIcon size="32px" color="#f59e0b" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
FolderIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<GithubIcon size="32px" color="#18181b" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
GithubIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<GlobeIcon size="32px" color="#06b6d4" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
GlobeIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<HeartIcon size="32px" color="#ef4444" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
HeartIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<HomeIcon size="32px" color="#8b5cf6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
HomeIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<IPhoneBatteryIcon size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
IPhoneBatteryIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<IPhoneSignalIcon size="32px" color="#3b82f6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
IPhoneSignalIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<IPhoneWifiIcon size="32px" color="#8b5cf6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
IPhoneWifiIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<InfoCircle size="32px" color="#3b82f6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
InfoCircle
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<InfoIcon size="32px" color="#3b82f6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
InfoIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<InboxArchive size="32px" color="#f97316" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
InboxArchive
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<LinkIcon size="32px" color="#06b6d4" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
LinkIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<LinkedinIcon size="32px" color="#0077b5" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
LinkedinIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<LogOut size="32px" color="#6b7280" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
LogOut
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<MailIcon size="32px" color="#8b5cf6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
MailIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<MapPinIcon size="32px" color="#ef4444" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
MapPinIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<MenuIcon size="32px" color="#6b7280" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
MenuIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<MessageIcon size="32px" color="#06b6d4" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
MessageIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<NotificationIcon size="32px" color="#f59e0b" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
NotificationIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<PhoneIcon size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
PhoneIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<RefreshIcon size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
RefreshIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<ReportIcon size="32px" color="#ef4444" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
ReportIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<SaveIcon size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
SaveIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<SearchIcon size="32px" color="#8b5cf6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
SearchIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<SecurityIcon size="32px" color="#f59e0b" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
SecurityIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<SettingsIcon size="32px" color="#6b7280" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
SettingsIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<StarIcon size="32px" color="#f59e0b" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
StarIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<SuccessIcon size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
SuccessIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<SunCloudyIcon size="32px" color="#f59e0b" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
SunCloudyIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<ToolsIcon size="32px" color="#6b7280" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
ToolsIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<TwitterIcon size="32px" color="#1da1f2" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
TwitterIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<UploadIcon size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
UploadIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<UserIcon size="32px" color="#8b5cf6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
UserIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<UsersIcon size="32px" color="#8b5cf6" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
UsersIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<ViewIcon size="32px" color="#06b6d4" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
ViewIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<WalletIcon size="32px" color="#10b981" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
WalletIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<WarningIcon size="32px" color="#f59e0b" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
WarningIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<WechatIcon size="32px" color="#07C160" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
WechatIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<WebsiteIcon size="32px" color="#06b6d4" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
WebsiteIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<WhatsappIcon size="32px" color="#25D366" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
WhatsappIcon
</p>
</div>
<div
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<XCircle size="32px" color="#ef4444" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">
XCircle
</p>
</div>
</div>
</div>
<script setup lang="ts">
import {
AlertTriangleIcon,
AppStoreIcon,
CalendarIcon,
ChartIcon,
CheckCircleIcon,
CheckIcon,
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
ClipboardIcon,
CloseIcon,
CodeIcon,
DashboardIcon,
DeleteIcon,
DocumentIcon,
DownloadIcon,
EditIcon,
ErrorIcon,
FacebookIcon,
FolderIcon,
GithubIcon,
GlobeIcon,
HeartIcon,
HomeIcon,
InboxArchiveIcon,
InfoCircleIcon,
InfoIcon,
IPhoneBatteryIcon,
IPhoneSignalIcon,
IPhoneWifiIcon,
LinkedinIcon,
LinkIcon,
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,
WechatIcon,
WhatsappIcon,
XCircleIcon,
} from "@coffic/cosy-ui/vue";
/**
* @component IconShowcase
* @description Vue 图标展示组件，展示各种图标的使用方法
*/
// 图标配置数组
const icons = [
{ component: AlertTriangleIcon, name: "AlertTriangle", color: "#f59e0b" },
{ component: AppStoreIcon, name: "AppStore", color: "#8b5cf6" },
{ component: CalendarIcon, name: "Calendar", color: "#3b82f6" },
{ component: ChartIcon, name: "Chart", color: "#06b6d4" },
{ component: CheckIcon, name: "Check", color: "#10b981" },
{ component: CheckCircleIcon, name: "CheckCircle", color: "#10b981" },
{ component: ChevronDownIcon, name: "ChevronDown", color: "#6b7280" },
{ component: ChevronLeftIcon, name: "ChevronLeft", color: "#6b7280" },
{ component: ChevronRightIcon, name: "ChevronRight", color: "#6b7280" },
{ component: ClipboardIcon, name: "Clipboard", color: "#8b5cf6" },
{ component: CloseIcon, name: "Close", color: "#ef4444" },
{ component: CodeIcon, name: "Code", color: "#8b5cf6" },
{ component: DashboardIcon, name: "Dashboard", color: "#3b82f6" },
{ component: DeleteIcon, name: "Delete", color: "#ef4444" },
{ component: DocumentIcon, name: "Document", color: "#8b5cf6" },
{ component: DownloadIcon, name: "Download", color: "#10b981" },
{ component: EditIcon, name: "Edit", color: "#3b82f6" },
{ component: ErrorIcon, name: "Error", color: "#ef4444" },
{ component: FacebookIcon, name: "Facebook", color: "#1877f2" },
{ component: FolderIcon, name: "Folder", color: "#f59e0b" },
{ component: GithubIcon, name: "Github", color: "#333" },
{ component: GlobeIcon, name: "Globe", color: "#06b6d4" },
{ component: HeartIcon, name: "Heart", color: "#ef4444" },
{ component: HomeIcon, name: "Home", color: "#8b5cf6" },
{ component: IPhoneBatteryIcon, name: "IPhoneBattery", color: "#10b981" },
{ component: IPhoneSignalIcon, name: "IPhoneSignal", color: "#3b82f6" },
{ component: IPhoneWifiIcon, name: "IPhoneWifi", color: "#8b5cf6" },
{ component: InboxArchiveIcon, name: "InboxArchive", color: "#f97316" },
{ component: InfoCircleIcon, name: "InfoCircle", color: "#3b82f6" },
{ component: InfoIcon, name: "Info", color: "#3b82f6" },
{ component: LinkIcon, name: "Link", color: "#06b6d4" },
{ component: LinkedinIcon, name: "Linkedin", color: "#0077b5" },
{ component: LogOut, name: "LogOut", color: "#6b7280" },
{ component: MailIcon, name: "Mail", color: "#8b5cf6" },
{ component: MapPinIcon, name: "MapPin", color: "#ef4444" },
{ component: MenuIcon, name: "Menu", color: "#6b7280" },
{ component: MessageIcon, name: "Message", color: "#06b6d4" },
{ component: NotificationIcon, name: "Notification", color: "#f59e0b" },
{ component: PhoneIcon, name: "Phone", color: "#10b981" },
{ component: RefreshIcon, name: "Refresh", color: "#10b981" },
{ component: ReportIcon, name: "Report", color: "#ef4444" },
{ component: SaveIcon, name: "Save", color: "#10b981" },
{ component: SearchIcon, name: "Search", color: "#8b5cf6" },
{ component: SecurityIcon, name: "Security", color: "#f59e0b" },
{ component: SettingsIcon, name: "Settings", color: "#6b7280" },
{ component: StarIcon, name: "Star", color: "#f59e0b" },
{ component: SuccessIcon, name: "Success", color: "#10b981" },
{ component: SunCloudyIcon, name: "SunCloudy", color: "#f59e0b" },
{ component: ToolsIcon, name: "Tools", color: "#6b7280" },
{ component: TwitterIcon, name: "Twitter", color: "#1da1f2" },
{ component: UploadIcon, name: "Upload", color: "#10b981" },
{ component: UserIcon, name: "User", color: "#8b5cf6" },
{ component: UsersIcon, name: "Users", color: "#8b5cf6" },
{ component: ViewIcon, name: "View", color: "#06b6d4" },
{ component: WalletIcon, name: "Wallet", color: "#10b981" },
{ component: WarningIcon, name: "Warning", color: "#f59e0b" },
{ component: WechatIcon, name: "Wechat", color: "#07C160" },
{ component: WebsiteIcon, name: "Website", color: "#06b6d4" },
{ component: WhatsappIcon, name: "Whatsapp", color: "#25D366" },
{ component: XCircleIcon, name: "XCircle", color: "#ef4444" },
];
</script>
<template>
<div style="padding: 2rem; background-color: #f8f9fa; border-radius: 0.5rem;">
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem;">
<div v-for="icon in icons" :key="icon.name"
style="text-align: center; padding: 1rem; background: white; border-radius: 0.375rem; border: 1px solid #e5e7eb;">
<component :is="icon.component" size="32px" :color="icon.color" />
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280;">{{ icon.name }}</p>
</div>
</div>
</div>
</template>