Icon 图标

安装

首先需要安装 @vicons/ionicons5 图标库：

pnpm add @vicons/ionicons5

基本用法

<template>
  <LbIcon>
    <BasketballSharp />
  </LbIcon>
</template>

<script setup lang="ts">
import { BasketballSharp } from '@vicons/ionicons5';
</script>

属性

属性名	类型	默认值	说明
color	string	#000	图标颜色
size	number|string	1rem	图标大小
spin	boolean	false	是否旋转

示例

不同颜色

<template>
  <LbIcon color="red">
    <BasketballSharp />
  </LbIcon>
</template>

<script setup lang="ts">
import { BasketballSharp } from '@vicons/ionicons5';
</script>

不同大小

<template>
  <div style="display: flex; gap: 10px; align-items: center">
    <LbIcon size="24px">
      <BasketballSharp />
    </LbIcon>
    <LbIcon size="32px">
      <BasketballSharp />
    </LbIcon>
    <LbIcon size="40px">
      <BasketballSharp />
    </LbIcon>
  </div>
</template>

<script setup lang="ts">
import { BasketballSharp } from '@vicons/ionicons5'
</script>

旋转效果

<template>
  <LbIcon spin>
    <BasketballSharp />
  </LbIcon>
</template>

<script setup lang="ts">
import { BasketballSharp } from '@vicons/ionicons5';
</script>