Icons
Introduction
The Icons component library provides a basic set of Astro icon components, built on SVG icons, supporting custom sizes, colors, and styles. This component library only provides a limited number of basic icons, primarily for internal use within the component library. If you need more comprehensive icon resources, we recommend using the following popular icon libraries:
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"
/>
<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
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" />
<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
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" />
<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
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 icon components.
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>