BFUIIcon 图标
一套常用的图标集合。
代码示例
图标名称(name)
使用 name 名称来选择图标，大小和颜色继承自容器样式。
查看代码
vue
<template>
<div>
<div>
<bf-icon name="setting" />
<bf-icon name="experiment" />
<bf-icon name="bell" />
<bf-icon name="loading" />
</div>
<div style="font-size: 24px;">
<bf-icon name="setting" />
<bf-icon name="experiment" />
<bf-icon name="bell" />
<bf-icon name="loading" />
</div>
<div style="font-size: 34px; color: #0042eb;">
<bf-icon name="setting" />
<bf-icon name="experiment" />
<bf-icon name="bell" />
<bf-icon name="loading" />
</div>
</div>
</template>
<script setup lang="ts">
import { BfIcon } from '@bf-teams/bfui-vue';
</script>
是否旋转(spin)
使用 spin 来定义图标是否自旋转。
查看代码
vue
<template>
<div>
<div style="font-size: 24px;">
<bf-icon name="experiment" />
<bf-icon name="bell" />
<bf-icon name="setting" spin />
<bf-icon name="loading" spin />
</div>
</div>
</template>
<script setup lang="ts">
import { BfIcon } from '@bf-teams/bfui-vue';
</script>
图标列表
TIP
常用图标库正在完善挑选中，稍后发布所收录的全部图标名称，尽请期待~
API
Icon Props
| 属性 Attribute | 说明 Description | 类型 Type | 默认值 Default |
|---|---|---|---|
| name | 图标名称 | String | - |
| spin | 是否自旋转 | Boolean | false |