Icon 图标

该图标组件是借助第三方 Fontawesome 进行开发的

基础用法

<template>
    <Icon icon="house"/>
    <Icon icon="user"/>
    <Icon icon="check"/>
    <Icon icon="phone"/>
    <Icon icon="poo"/>
    <Icon icon="heart"/>
    <Icon icon="camera"/>
    <Icon icon="list"/>
    <Icon icon="lock"/>
    <Icon icon="video"/>
    <Icon icon="droplet"/>
    <Icon icon="fire"/>
    <Icon icon="plus"/>
    <Icon icon="minus"/>
    <Icon icon="plane"/>
    <Icon icon="hand"/>
</template>
<script setup>
import Icon from '@/components/Icon/Icon.vue'   
</script>
<style scoped>
.vh-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    margin: 6px;
    border-radius: 6px;
}
</style>

状态

使用 type 来定义 Icon 的状态

<template>
    <Icon type="primary" icon="house"/>
    <Icon type="primary" icon="user"/>
    <Icon type="primary" icon="check"/>
    <Icon type="primary" icon="phone"/>
    <Icon type="primary" icon="poo"/>
    <Icon type="primary" icon="heart"/>
    <Icon type="primary" icon="camera"/>
    <Icon type="primary" icon="list"/>
    <Icon type="primary" icon="lock"/>
    <Icon type="primary" icon="video"/>
    <Icon type="primary" icon="droplet"/>
    <Icon type="primary" icon="fire"/>
    <Icon type="primary" icon="plus"/>
    <Icon type="primary" icon="minus"/>
    <Icon type="primary" icon="plane"/>
    <Icon type="primary" icon="hand"/>
</template>
<script setup>
import Icon from '@/components/Icon/Icon.vue'   
</script>
<style scoped>
.vh-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    margin: 6px;
    border-radius: 6px;
}
</style>

自定义颜色

使用 color 来定义 Icon 的颜色

<template>
    <Icon color="#845EC2" icon="house"/>
    <Icon color="#D65DB1" icon="user"/>
    <Icon color="#FF6F91" icon="check"/>
    <Icon color="#FF9671" icon="phone"/>
    <Icon color="#FFC75F" icon="poo"/>
    <Icon color="#F9F871" icon="heart"/>
    <Icon color="#2C73D2" icon="camera"/>
    <Icon color="#0089BA" icon="list"/>
    <Icon color="#C4FCEF" icon="lock"/>
    <Icon color="#C34A36" icon="video"/>
    <Icon color="#AE5D00" icon="droplet"/>
    <Icon color="#296073" icon="fire"/>
    <Icon color="#D0E6F0" icon="plus"/>
    <Icon color="#936C00" icon="minus"/>
    <Icon color="#008DCD" icon="plane"/>
    <Icon color="#00D2FC" icon="hand"/>
</template>
<script setup>
import Icon from '@/components/Icon/Icon.vue'   
</script>
<style scoped>
.vh-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    margin: 6px;
    border-radius: 6px;
}
</style>

自定义大小

使用 size 来定义 Icon 的大小

<template>
    <Icon color="#845EC2" size="2x" icon="house"/>
    <Icon color="#D65DB1" size="2x" icon="user"/>
    <Icon color="#FF6F91" size="2x" icon="check"/>
    <Icon color="#FF9671" size="2x" icon="phone"/>
</template>
<script setup>
import Icon from '@/components/Icon/Icon.vue'   
</script>
<style scoped>
.vh-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    margin: 6px;
    border-radius: 6px;
}
</style>

参数

属性名	说明	类型	默认值
icon	图标	https://fontawesome.com/search?o=r&m=free
type	状态	primary| success| warning| danger|info
size	大小	1x | 2x| 3x | 4x | 5x | 6x | 7x | 8x | 9x | 10x
color	颜色	十六进制颜色