Vue

Icons Vue

Introduction

Icons Vue component library provides a complete set of Vue icon components based on SVG icons, supporting customizable size, color, and styles. All icons are carefully designed to ensure clarity and beauty at different sizes. This component library is suitable for applications that need 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.

<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

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

<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

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

<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

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

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

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

All Icons

Display all available Vue icon components.

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