Icon 图标
使用fortawesome 图标库
基础用法
参考 fontawesome 官网free组件icon名和使用方式
<script setup>
import Icon from '@/components/Icons/VIcon.vue'
</script>
<template>
<Icon :style="{marginRight:'20px'}" icon="fa-city" color="#409eff" />
<Icon :style="{marginRight:'20px'}" icon="spinner" spin color="#ccc" />
<Icon :style="{marginRight:'20px'}" icon="user" type="primary" />
<Icon :style="{marginRight:'20px'}" icon="user" type="success" />
<Icon :style="{marginRight:'20px'}" icon="user" type="warning" />
<Icon :style="{marginRight:'20px'}" icon="user" type="danger" />
</template><script setup>
import Icon from '@/components/Icons/VIcon.vue'
</script>
<template>
<Icon :style="{marginRight:'20px'}" icon="fa-city" color="#409eff" />
<Icon :style="{marginRight:'20px'}" icon="spinner" spin color="#ccc" />
<Icon :style="{marginRight:'20px'}" icon="user" type="primary" />
<Icon :style="{marginRight:'20px'}" icon="user" type="success" />
<Icon :style="{marginRight:'20px'}" icon="user" type="warning" />
<Icon :style="{marginRight:'20px'}" icon="user" type="danger" />
</template>Button Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| fontawesome参数 | 查看文档 | - | - |
| type | 类型 | primary / success / warning / danger | - |
| color | 颜色 | string | - |