Icon 图标

基于 Font Awesome 图标库封装，提供丰富的图标集合，支持大小、颜色与动画效果。

基础用法

直接通过设置 icon 属性来使用即可。

home

user

edit

check

times

info-circle

arrow-circle-down

ban

exclamation-circle

<script setup>
import Icon from '@/components/Icon/Icon.vue'
</script>
<template>
  <div class="icon-demo">
    <div class="icon-item">
      <Icon icon="home" />
      <span>home</span>
    </div>
    <div class="icon-item">
      <Icon icon="user" />
      <span>user</span>
    </div>
    <div class="icon-item">
      <Icon icon="search" />
      <span>search</span>
    </div>
    <div class="icon-item">
      <Icon icon="edit" />
      <span>edit</span>
    </div>
    <div class="icon-item">
      <Icon icon="check" />
      <span>check</span>
    </div>
    <div class="icon-item">
      <Icon icon="times" />
      <span>times</span>
    </div>
    <div class="icon-item">
      <Icon icon="info-circle" />
      <span>info-circle</span>
    </div>
    <div class="icon-item">
      <Icon icon="arrow-circle-down" />
      <span style="white-space: nowrap">arrow-circle-down</span>
    </div>
    <div class="icon-item">
      <Icon icon="ban" />
      <span style="white-space: nowrap">ban</span>
    </div>
    <div class="icon-item">
      <Icon icon="exclamation-circle" />
      <span style="white-space: nowrap">exclamation-circle</span>
    </div>
  </div>
</template>

<style scoped>
.icon-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 100px;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  transition: all 0.2s;
}
.icon-item:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.icon-item i {
  font-size: 30px;
  margin-bottom: 10px;
}
.icon-item span {
  font-size: 12px;
}
</style>

图标尺寸

通过 size 属性设置图标的大小，可选值包括：xs、sm、lg、xl、2xl 等。

默认

2xl

<script setup>
import Icon from '@/components/Icon/Icon.vue'
</script>
<template>
  <div class="icon-demo">
    <div class="icon-item">
      <Icon icon="user" size="xs" />
      <span>xs</span>
    </div>
    <div class="icon-item">
      <Icon icon="user" size="sm" />
      <span>sm</span>
    </div>
    <div class="icon-item">
      <Icon icon="user" />
      <span>默认</span>
    </div>
    <div class="icon-item">
      <Icon icon="user" size="lg" />
      <span>lg</span>
    </div>
    <div class="icon-item">
      <Icon icon="user" size="xl" />
      <span>xl</span>
    </div>
    <div class="icon-item">
      <Icon icon="user" size="2xl" />
      <span>2xl</span>
    </div>
  </div>
</template>

<style scoped>
.icon-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 100px;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  transition: all 0.2s;
}
.icon-item:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.icon-item span {
  font-size: 12px;
  margin-top: 10px;
}
</style>

图标颜色

通过 color 属性设置图标的颜色。

黄色

红色

绿色

蓝色

ban

<script setup>
import Icon from '@/components/Icon/Icon.vue'
</script>
<template>
  <div class="icon-demo">
    <div class="icon-item">
      <Icon icon="star" color="#e6a23c" />
      <span>黄色</span>
    </div>
    <div class="icon-item">
      <Icon icon="heart" color="#f56c6c" />
      <span>红色</span>
    </div>
    <div class="icon-item">
      <Icon icon="check-circle" color="#67c23a" />
      <span>绿色</span>
    </div>
    <div class="icon-item">
      <Icon icon="info-circle" color="#409eff" />
      <span>蓝色</span>
    </div>
    <div class="icon-item">
      <Icon icon="ban" color="red"/>
      <span style="white-space: nowrap">ban</span>
    </div>
  </div>
</template>

<style scoped>
.icon-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 100px;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  transition: all 0.2s;
}
.icon-item:hover {
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.icon-item i {
  font-size: 30px;
  margin-bottom: 10px;
}
.icon-item span {
  font-size: 12px;
}
</style>

图标动画

图标可以添加动画效果，包括旋转、跳动、抖动等。

spin

shake

beat

bounce

fade

flip

beat-fade

<script setup>
import Icon from '@/components/Icon/Icon.vue'
</script>
<template>
  <div class="icon-demo">
    <div class="icon-item">
      <Icon icon="spinner" spin />
      <span>spin</span>
    </div>
    <div class="icon-item">
      <Icon icon="circle-notch" spin />
      <span>spin</span>
    </div>
    <div class="icon-item">
      <Icon icon="sync" spin />
      <span>spin</span>
    </div>
    <div class="icon-item">
      <Icon icon="cog" spin />
      <span>spin</span>
    </div>
    <div class="icon-item">
      <Icon icon="bell" shake />
      <span>shake</span>
    </div>
    <div class="icon-item">
      <Icon icon="heart" beat />
      <span>beat</span>
    </div>
    <div class="icon-item">
      <Icon icon="star" bounce />
      <span>bounce</span>
    </div>
    <div class="icon-item">
      <Icon icon="thumbs-up" fade />
      <span>fade</span>
    </div>
    <div class="icon-item">
      <Icon icon="camera-rotate" flip />
      <span>flip</span>
    </div>
    <div class="icon-item">
      <Icon icon="poo-bolt" beat-fade />
      <span>beat-fade</span>
    </div>
  </div>
</template>

<style scoped>
.icon-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 100px;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  transition: all 0.2s;
}
.icon-item:hover {
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.icon-item i {
  font-size: 30px;
  margin-bottom: 10px;
}
.icon-item span {
  font-size: 12px;
}
</style>

Attributes

Icon Attributes

属性名	说明	类型	默认值
icon	图标名称或图标对象	`string \| object \| Array<string> \| IconDefinition`	—
color	图标颜色	`string`	—
size	图标大小	`'2xs' \| 'xs' \| 'sm' \| 'lg' \| 'xl' \| '2xl' \| '1x' \| '2x' \| '3x' \| '4x' \| '5x' \| '6x' \| '7x' \| '8x' \| '9x' \| '10x'`	—
spin	是否旋转图标	`boolean`	false
pulse	是否脉冲式旋转	`boolean`	false
border	是否显示边框	`boolean`	false
fixedWidth	是否固定宽度	`boolean`	false
flip	翻转方向	`'horizontal' \| 'vertical' \| 'both'`	—
listItem	是否作为列表项图标	`boolean`	false
pull	图标浮动方向	`'right' \| 'left'`	—
rotation	图标旋转角度	`90 \| 180 \| 270 \| '90' \| '180' \| '270'`	—
swapOpacity	是否交换不透明度	`boolean`	false
transform	图标变换	`object \| string`	—
symbol	是否转换为 SVG 符号	`boolean \| string`	false
title	图标标题	`string`	—
inverse	是否反色	`boolean`	false
bounce	是否弹跳动画	`boolean`	false
shake	是否抖动动画	`boolean`	false
beat	是否心跳动画	`boolean`	false
fade	是否淡入淡出动画	`boolean`	false
beatFade	是否心跳淡入淡出动画	`boolean`	false
spinPulse	是否脉冲旋转动画	`boolean`	false
spinReverse	是否反向旋转动画	`boolean`	false

Icon 图标 ​

基础用法 ​

图标尺寸 ​

图标颜色 ​

图标动画 ​

Attributes ​