CUI

Appearance

cuixingjian
1235
7.1m

Icon 图标 ​

基础用法 ​

图标组件以 xicons 图标库为例，支持使用各种图标库的图标。

安装 ​

选择一个你喜欢的包管理器

bash
npm i -D @vicons/ionicons5
bash
pnpm add -D @vicons/ionicons5
bash
yarn add -D @vicons/ionicons5

常用 ​

Add
AddCircle
Search
Home
Heart
Person
Settings
SettingsOutline
Notifications
Mail
CloudDownload
Star
Trash
Share
Calendar
Camera
Bookmark
Alarm
Refresh
Link
LocationOutline
ChevronBack
ChevronUp
ChevronDown
ChevronForward
CopyOutline
EllipsisHorizontal
Eye
EyeOff
FolderOpenOutline
HelpCircleOutline
List
Mail
MenuSharp
Mic

网站 ​

LogoGithub
LogoGitlab
LogoAlipay
LogoDocker
LogoApple
LogoFirefox
LogoFacebook
LogoGoogle
LogoHtml5
LogoChrome
LogoElectron
LogoJavascript
LogoNpm
LogoOctocat
LogoPaypal
LogoReact
LogoPython
LogoPlaystation
LogoNodejs
LogoSass
LogoTwitter
LogoVue
LogoWechat
LogoXbox
LogoWindows
LogoYoutube
LogoTux
LogoTwitch
LogoSteam
LogoTiktok

所有图标

组件库默认支持 vicons/ionicons5,更多图标请安装其他图标库 。

图标属性 ​

图标组件支持以下属性：

属性名说明类型可选值默认值
color图标颜色String——
size图标大小（px）Number/String——
rotate图标旋转角度Number/String——
flip图标翻转方向Stringhorizontal / vertical / both—
spin是否启用旋转动画Boolean—false

图标颜色 ​

图标大小 ​

图标旋转 ​

图标翻转 ​

旋转动画 ​

vue
<script setup lang="ts">
import {
  Heart,
  Home,
  Settings,
  Share,
  CloudDownload,
  Refresh
} from '@vicons/ionicons5';
</script>
<template>
  <!-- 基础用法 -->
  <c-icon color="red" size="20">
    <Heart />
  </c-icon>

  <!-- 设置颜色 -->
  <c-icon color="#409EFF" size="24">
    <Heart />
  </c-icon>

  <!-- 设置大小 -->
  <c-icon size="32">
    <Home />
  </c-icon>

  <!-- 设置旋转 -->
  <c-icon size="24" rotate="45">
    <Refresh />
  </c-icon>

  <!-- 设置翻转 -->
  <c-icon size="24" flip="horizontal">
    <Share />
  </c-icon>

  <!-- 设置旋转动画 -->
  <c-icon size="24" spin>
    <CloudDownload />
  </c-icon>
</template>