Chi-UI

Appearance

Icon 图标 ​

Chi UI 使用 Lucide 图标库提供的内部图标。

代码示例 ​

基本使用 ​

可以把图标通过 icon 属性传入，也可以放在默认插槽下。

<template>
  <chi-icon :icon="Dice1"></chi-icon>
  <chi-icon :icon="Dice2"></chi-icon>
  <chi-icon :icon="Dice3"></chi-icon>
  <chi-icon :icon="Dice4"></chi-icon>
  <chi-icon :icon="Dice5"></chi-icon>
  <chi-icon :icon="Dice6"></chi-icon>
  <chi-icon>
    <Dices></Dices>
  </chi-icon>
</template>

<script setup>
import { Dice1, Dice2, Dice3, Dice4, Dice5, Dice6, Dices } from 'lucide-vue-next'
</script>

修改颜色 ​

通过 color 属性可快速修改图标的颜色。

<template>
  <chi-icon :icon="Bell" color="red"></chi-icon>
  <chi-icon :icon="Bell" color="#ffa500"></chi-icon>
  <chi-icon :icon="Bell" color="rgb(0, 255, 0)"></chi-icon>
</template>

<script setup>
import { Bell } from 'lucide-vue-next'
</script>

调整尺寸 ​

通过 scale 属性来进行缩放。

也可以通过 size 属性设置一个合法的 CSS 值指定图标的大小。

<template>
  <chi-icon :icon="Flag"></chi-icon>
  <chi-icon :icon="Flag" :scale="1.6"></chi-icon>
  <chi-icon :icon="Cat"></chi-icon>
  <chi-icon :icon="Cat" size="32px"></chi-icon>
</template>

<script setup>
import { Cat, Flag } from 'lucide-vue-next'
</script>

旋转效果 ​

设置 effect 属性为 spin-in 或 spin-out 可以让图标旋转。

<template>
  <chi-icon :icon="LoaderCircle" effect="spin-in"></chi-icon>
  <chi-icon :icon="LoaderCircle" effect="spin-out"></chi-icon>
</template>

<script setup>
import { LoaderCircle } from 'lucide-vue-next'
</script>

自定义图标 ​

<template>
  <chi-icon :scale="2">
    <svg viewBox="0 0 1024 1024">
      <path
        d="M682.666667 42.666667H298.666667c-25.6 0-42.666667 17.066667-42.666667 42.666666v213.333334l426.666667 213.333333 170.666666 64 170.666667-64V298.666667l-341.333333-256z"
        fill="#21A366"
        p-id="1317"
      />
      <path d="M256 298.666667h426.666667v213.333333H256z" fill="#107C41" p-id="1318" />
      <path
        d="M1024 85.333333v213.333334h-341.333333V42.666667h298.666666c21.333333 0 42.666667 21.333333 42.666667 42.666666z"
        fill="#33C481"
        p-id="1319"
      />
      <path
        d="M682.666667 512H256v426.666667c0 25.6 17.066667 42.666667 42.666667 42.666666h682.666666c25.6 0 42.666667-17.066667 42.666667-42.666666v-213.333334l-341.333333-213.333333z"
        fill="#185C37"
        p-id="1320"
      />
      <path
        d="M588.8 256H256v597.333333h324.266667c29.866667 0 59.733333-29.866667 59.733333-59.733333V307.2c0-29.866667-21.333333-51.2-51.2-51.2z"
        opacity=".5"
        p-id="1321"
      />
      <path
        d="M546.133333 810.666667H51.2C21.333333 810.666667 0 789.333333 0 759.466667V264.533333C0 234.666667 21.333333 213.333333 51.2 213.333333h499.2c25.6 0 46.933333 21.333333 46.933333 51.2v499.2c0 25.6-21.333333 46.933333-51.2 46.933334z"
        fill="#107C41"
        p-id="1322"
      />
      <path
        d="M145.066667 682.666667L256 512 153.6 341.333333h81.066667l55.466666 106.666667c8.533333 12.8 8.533333 21.333333 12.8 25.6l12.8-25.6L375.466667 341.333333h76.8l-102.4 170.666667 106.666666 170.666667h-85.333333l-64-119.466667c0-4.266667-4.266667-8.533333-8.533333-17.066667 0 4.266667-4.266667 8.533333-8.533334 17.066667L226.133333 682.666667H145.066667z"
        fill="#FFFFFF"
        p-id="1323"
      />
      <path d="M682.666667 512h341.333333v213.333333h-341.333333z" fill="#107C41" p-id="1324" />
    </svg>
  </chi-icon>
</template>

API ​

预设类型 ​

ts
type EffectType = 'spin-in' | 'spin-out'

Icon 属性 ​

名称类型说明默认值
colorstring设置图标的颜色null
effectEffectType设置效果动画名称null
iconLucideIconLucide 图标null
scalenumber | string设置图标的缩放比例1
sizenumber | string指定图标的大小null