Icon

基于 UnoCSS presetIcons 渲染图标,默认尺寸 size-4,垂直居中对齐。

基本用法

默认

传入 UnoCSS 图标类名即可渲染,默认尺寸 size-4。

<script setup lang="ts">
import { Icon } from '@tripo3d/design';
</script>

<template>
  <Icon icon="i-tripo:close" />
</template>

尺寸与颜色

通过 class 覆写 size / color

使用 UnoCSS 工具类自定义图标外观。

<Icon icon="i-tripo:close" class="size-4" />
<Icon icon="i-tripo:close" class="size-5 text-blue-1" />
<Icon icon="i-tripo:close" class="size-6 text-red" />
<Icon icon="i-tripo:close" class="size-8 text-gray-400" />

常用图标集

Tripo 图标集

design 包已内置 i-tripo:* 图标集,可直接使用。

<Icon icon="i-tripo:check" class="size-5" />
<Icon icon="i-tripo:close" class="size-5" />
<Icon icon="i-tripo:bell" class="size-5" />
<Icon icon="i-tripo:info" class="size-5" />
<Icon icon="i-tripo:minus" class="size-5" />

API

Props

名称	类型	默认值	说明
icon	string	—	必填。UnoCSS 图标类名,如 i-tripo:close
class	string	—	额外 class,可用于调整尺寸或颜色

可访问性

• 图标默认作为装饰性元素渲染,屏幕阅读器会跳过
• 若图标承载语义(如独立的操作按钮),请在父元素设置 aria-label 说明用途
• 作为按钮内部图标时,建议同时提供可见文本或 aria-label