Vue

Icons Vue

简介

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

Props

class

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

<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 { UserIcon } from '@coffic/cosy-ui/vue';

/**
 * @component ClassBackground
 * @description Vue 图标 class 属性背景样式示例
 */
</script>

<template>
    <UserIcon size="32px" class="cosy:bg-blue-100 cosy:p-3 cosy:rounded-full" />
</template>

<script setup lang="ts">
import { UserIcon } from '@coffic/cosy-ui/vue';

/**
 * @component ClassShadow
 * @description Vue 图标 class 属性阴影效果示例
 */
</script>

<template>
    <UserIcon size="32px" class="cosy:shadow-lg cosy:p-2 cosy:bg-white cosy:rounded-lg" />
</template>

<script setup lang="ts">
import { UserIcon } from '@coffic/cosy-ui/vue';

/**
 * @component ClassTransform
 * @description Vue 图标 class 属性变换效果示例
 */
</script>

<template>
    <UserIcon size="32px" class="cosy:rotate-45 cosy:transition-transform cosy:duration-300" />
</template>

color

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

<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 ColorBlue
 * @description Vue 图标蓝色示例
 */
</script>

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

<script setup lang="ts">
import { UserIcon } from '@coffic/cosy-ui/vue';

/**
 * @component ColorGreen
 * @description Vue 图标绿色示例
 */
</script>

<template>
    <UserIcon size="32px" color="#10b981" />
</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 尺寸值。

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

<script setup lang="ts">
import { UserIcon } from '@coffic/cosy-ui/vue';

/**
 * @component SizeXLarge
 * @description Vue 图标超大尺寸示例
 */
</script>

<template>
    <UserIcon size="64px" />
</template>

Slots

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

特殊图标

SocialIcon

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

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

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

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

<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/vue';
---

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

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

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

所有图标

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

AlertTriangle

AppStore

Calendar

Chart

Check

CheckCircle

ChevronDown

ChevronLeft

ChevronRight

Clipboard

Code

Dashboard

Delete

Document

Download

Edit

Error

Facebook

Folder

Github

Globe

Heart

Home

IPhoneBattery

IPhoneSignal

IPhoneWifi

InboxArchive

InfoCircle

Info

Link

LogOut

Mail

MapPin

Message

Notification

Phone

Refresh

Report

Save

Security

Settings

Star

Success

SunCloudy

Tools

Twitter

Upload

User

Users

View

Wallet

Warning

Website

XCircle