Icon 按钮

Icon图标组件，本项目使用了fontawesome图标库，具体使用方法请参考fontawesome官网

基础用法

使用 icon指定icon，使用 type来定义按钮的样式。

<template>
    <div class="container">
        <div class="item">
        <ym-icon  type="primary" icon="search" size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon  type="success" icon="house" size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon  type="warning" icon="user" size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon  type="danger" icon="location-dot" size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon type="info"  icon="phone" size="2x"></ym-icon>
        </div>


    </div>
</template>

<script setup lang="ts">

</script>
<style scoped>
.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}
</style>

图标尺寸

使用 size属性来定义图标的尺寸。

<template>
    <div class="container">
        <div class="item">
        <ym-icon  type="primary" icon="search" size="2xs"></ym-icon>
        </div>
        <div class="item">
        <ym-icon type="primary" icon="search"  size="xs"></ym-icon>
        </div>
        <div class="item">
        <ym-icon  type="primary"  icon="search"  size="sm"></ym-icon>
        </div>
        <div class="item">
        <ym-icon type="primary"  icon="search"  size="lg"></ym-icon>
        </div>
        <div class="item">
        <ym-icon type="primary"   icon="search"  size="xl"></ym-icon>
        </div>

    </div>
</template>

<script setup lang="ts">

</script>
<style scoped>
.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}
</style>

图标动画

使用 pulse,bounce,shake,beat,fade等属性来定义图标的尺寸。

<template>
    <div class="container">
        <div class="item">
        <ym-icon  type="primary" pulse  icon="star" size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon type="primary" bounce icon="star"  size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon  type="primary" beat  icon="star"  size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon type="primary"  fade icon="star"  size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon type="primary" shake  icon="star"  size="2x"></ym-icon>
        </div>

    </div>
</template>

<script setup lang="ts">

</script>
<style scoped>
.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}
</style>

图标颜色·

使用 color属性来定义图标的尺寸。

<template>
    <div class="container">
        <div class="item">
        <ym-icon  color="red"  icon="search" size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon  color="blue"  icon="house" size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon color="green"  icon="user" size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon  color="yellow" icon="location-dot" size="2x"></ym-icon>
        </div>
        <div class="item">
        <ym-icon  color="pink"  icon="phone" size="2x"></ym-icon>
        </div>


    </div>
</template>

<script setup lang="ts">

</script>
<style scoped>
.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}
</style>

Icon API

本篇api介绍只包含部分常用的属性，若想了解更多的属性请参考fontawesome官网

Props

Name	Description	Type	Default
size	尺寸	enum - '2xs'| 'sm'| 'xl'|'1x'| '2x'|'3x'\	—
type	类型	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	info
fixedWidth	是否开启固定宽度	boolean	false
flip	用于水平或垂直翻转图标	enum - 'horizontal'| 'vertical'| 'both'	-
icon	图标名称	string	-
pulse	是否显示脉冲动画	boolean	false
spin	是否显示旋转动画	boolean	false
bounce	是否显示弹跳动画	boolean	false
shake	是否显示摇晃动画	boolean	false
beat	是否显示心跳动画	boolean	false
fade	是否显示渐入渐出动画	boolean	false
color	图标颜色	string(颜色值)	-