Icon 图标

Xin Design的图标组件是基于Fontawesome图标库结合实现的.

如若需要查看所有可用的 SVG 图标请查阅Fontawesome官网和有关Fontawesome的文档.

基础用法

<script setup lang="ts">
import Icon from '../../../src/components/Icon/Icon.vue'
</script>

<template>
  <Icon icon="user" class="mr-20" />

  <Icon icon="lock" class="mr-20" />
  <Icon icon="heart" class="mr-20" />
  <Icon icon="download" class="mr-20" />
  <Icon icon="star" class="mr-20" />
  <Icon icon="comment" class="mr-20" />
</template>

<style scoped>
.mr-20 {
  margin-right: 20px;
}
</style>

图标类型

使用 type 属性来定义图标的类型.

<script setup lang="ts">
import Icon from '../../../src/components/Icon/Icon.vue'
</script>

<template>
  <Icon icon="user" class="mr-20" />
  <Icon icon="lock" class="mr-20" type="primary" />
  <Icon icon="heart" class="mr-20" type="success" />
  <Icon icon="download" class="mr-20" type="info" />
  <Icon icon="star" class="mr-20" type="warning" />
  <Icon icon="comment" class="mr-20" type="danger" />
</template>

<style scoped>
.mr-20 {
  margin-right: 20px;
}
</style>

图标尺寸

使用 size 属性可以来定义图标尺寸的大小. 默认尺寸为 lg

<script setup lang="ts">
import Icon from '../../../src/components/Icon/Icon.vue'
</script>

<template>
  <Icon icon="key" class="mr-20" />
  <Icon icon="heart" class="mr-20" size="2xs" />
  <Icon icon="star" class="mr-20" size="xs" />
  <Icon icon="comment" class="mr-20" size="sm" />
  <Icon icon="house" class="mr-20" size="lg" />
  <Icon icon="phone" class="mr-20" size="xl" />
  <Icon icon="music" class="mr-20" size="2xl" />
  <Icon icon="bell" class="mr-20" size="1x" />
  <Icon icon="camera" class="mr-20" size="2x" />
  <Icon icon="book" class="mr-20" size="3x" />
  <Icon icon="list" class="mr-20" size="4x" />
  <Icon icon="tansh" class="mr-20" size="5x" />
</template>

<style scoped>
.mr-20 {
  margin-right: 20px;
}
</style>

图标颜色

使用 color 属性可以来改变图标颜色,接收一个string类型的颜色值.

<script setup lang="ts">
import Icon from '../../../src/components/Icon/Icon.vue'
</script>

<template>
  <Icon icon="heart" class="mr-20" color="#f00" />
  <Icon icon="star" class="mr-20" color="#f0f" />
  <Icon icon="comment" class="mr-20" color="#00f" />
</template>

<style scoped>
.mr-20 {
  margin-right: 20px;
}
</style>

旋转图标

使用 spin 属性可以控制图标是否旋转,默认值为false.

<script setup lang="ts">
import Icon from '../../../src/components/Icon/Icon.vue'
</script>

<template>
  <Icon icon="heart" class="mr-20" spin />
  <Icon icon="star" class="mr-20" spin />
  <Icon icon="comment" class="mr-20" spin />
</template>

<style scoped>
.mr-20 {
  margin-right: 20px;
}
</style>

图标名称

使用 title 属性可以定义图标的名称,鼠标放到图标上后有反馈效果.

<script setup lang="ts">
import Icon from '../../../src/components/Icon/Icon.vue'
</script>

<template>
  <Icon icon="heart" class="mr-20" title="heart" />
  <Icon icon="star" class="mr-20" title="star" />
  <Icon icon="comment" class="mr-20" title="comment" />
</template>

<style scoped>
.mr-20 {
  margin-right: 20px;
}
</style>

Icon API

Icon 属性

Name	Description	Type	Default
icon	图标	string	-
size	图标尺寸	enum - 2xs xs sm lg xl 2xl 1x 2x 3x 4x 5x 6x 7x 8x 9x 10x	lg
type	图标类型	enum - primary success warning danger info	—
color	图标颜色	string	-
spin	旋转图标	boolean	false
title	图标标题	string	-