Icon 图标
提供了一套常用的图标集合。
使用方法
直接通过设置icon
为 iconName
来使用即可。例如:
<template>
<div class="container">
<Icon icon="edit" type="danger" color="#3451b2" size="2x" />
<Icon icon="share" type="danger" color="#3451b2" size="2x" />
<Icon icon="user" type="danger" color="#3451b2" size="2x" />
<Button type="primary" icon="search">搜索</Button>
</div>
</template>
<script setup>
import Icon from '@/components/Icon/Icon.vue'
import Button from '@/components/Button/Button.vue'
</script>
<style scoped>
.container {
display: flex;
align-items: center;
}
.container > i,button {
margin: 0 20px;
}
</style>
图标使用
Icon组件内部使用了fontawesome
图标库,可以访问官网搜索图标并查看使用方法:https://fontawesome.com/search