Icon图标

对fontawesome图标库进行封装，涵盖了各种常见的图标需求。

基础用法

传入icon属性设置要使用的Icon图标。

<template lang="">
  <el-icon icon="spinner"></el-icon>
  <el-icon icon="house"></el-icon>
  <el-icon icon="user"></el-icon>
  <el-icon icon="check"></el-icon>
  <el-icon icon="star"></el-icon>
  <el-icon icon="arrow-right"></el-icon>
  <el-icon icon="arrow-up"></el-icon>
  <el-icon icon="xmark"></el-icon>
</template>
<script setup>
import ElIcon from '@/components/Icon/Icon.vue'
</script>

扩展用法

Icon组件是对fontawesome图标库的封装，因此该图标库的相关属性均可以设置, 比如颜色color、大小size, 旋转角度rotation。

<template>
  <el-icon icon="user"></el-icon>
  <el-icon icon="user" color="blue"></el-icon>
  <el-icon icon="user" size="2x"></el-icon>
  <el-icon icon="user" rotation="180"></el-icon>
</template>
<script setup>
import ElIcon from '@/components/Icon/Icon.vue'
</script>