Icon 图标

TuffEx 使用 UnoCSS preset-icons 方案，提供丰富的图标支持，并通过 TuffIcon 统一渲染与管理。

基础用法

UnoCSS 图标类名

<template>
  <!-- Remix Icon -->
  <i class="i-ri-home-line" />
  <i class="i-ri-search-line" />
  <i class="i-ri-settings-3-line" />
  <!-- Carbon -->
  <i class="i-carbon-user" />
  <i class="i-carbon-folder" />

  <!-- Simple Icons (品牌) -->
  <i class="i-simple-icons-github" />
  <i class="i-simple-icons-visualstudiocode" />
</template>

TuffIcon 组件

<template>
  <TuffIcon name="i-ri-home-line" />
  <TuffIcon name="chevron-down" />
  <TuffIcon :icon="{ type: 'emoji', value: '🚀' }" />
  <TuffIcon :icon="{ type: 'url', value: '/app.svg', colorful: true }" />
</template>

TuffIcons 常量

@talex-touch/utils 提供预定义的图标常量，确保一致性：

import { TuffIcons, AppIcons } from '@talex-touch/utils'

// 通用 UI 图标
TuffIcons.Home // 'i-ri-home-line'
TuffIcons.Search // 'i-ri-search-line'
TuffIcons.Settings // 'i-ri-settings-3-line'

// 应用品牌图标
AppIcons.VSCode // 'i-simple-icons-visualstudiocode'
AppIcons.GitHub // 'i-simple-icons-github'

图标分类

导航图标

名称	类名	预览
Home	`i-ri-home-line`
Back	`i-ri-arrow-left-line`
Forward	`i-ri-arrow-right-line`
Menu	`i-ri-menu-line`

操作图标

名称	类名	预览
Search	`i-ri-search-line`
Add	`i-ri-add-line`
Delete	`i-ri-delete-bin-line`
Edit	`i-ri-edit-line`
Copy	`i-ri-file-copy-line`
Save	`i-ri-save-line`
Download	`i-ri-download-line`
Upload	`i-ri-upload-line`
Refresh	`i-ri-refresh-line`

状态图标

名称	类名	预览
Check	`i-ri-check-line`
Close	`i-ri-close-line`
Warning	`i-ri-error-warning-line`
Info	`i-ri-information-line`
Error	`i-ri-close-circle-line`

文件图标

名称	类名	预览
File	`i-ri-file-line`
Folder	`i-ri-folder-line`
FileCode	`i-ri-file-code-line`
FileImage	`i-ri-image-line`

UI 元素图标

名称	类名	预览
Settings	`i-ri-settings-3-line`
User	`i-ri-user-line`
Star	`i-ri-star-line`
Heart	`i-ri-heart-line`
Lock	`i-ri-lock-line`
Eye	`i-ri-eye-line`

品牌图标

名称	类名	预览
GitHub	`i-simple-icons-github`
VSCode	`i-simple-icons-visualstudiocode`
Chrome	`i-simple-icons-googlechrome`
Discord	`i-simple-icons-discord`

自定义样式

<template>
  <!-- 尺寸 -->
  <i class="i-ri-home-line text-sm" />
  <i class="i-ri-home-line text-base" />
  <i class="i-ri-home-line text-xl" />
  <i class="i-ri-home-line text-2xl" />

  <!-- 颜色 -->
  <i class="i-ri-star-line text-yellow-500" />
  <i class="i-ri-heart-fill text-red-500" />
  <i class="i-ri-check-circle-fill text-green-500" />

  <!-- 动画 -->
  <i class="i-ri-loader-4-line animate-spin" />
</template>

TxStatusIcon

用于在图标右下角叠加状态指示器（如插件运行状态/健康状态）。

TxStatusIcon

在角标上展示不同状态。

示例即将加载...

<template>
  <TxStatusIcon name="i-ri-translate-2" :size="22" tone="success" />
  <TxStatusIcon name="i-ri-translate-2" :size="22" tone="warning" />
  <TxStatusIcon name="i-ri-translate-2" :size="22" tone="error" />
  <TxStatusIcon name="i-ri-translate-2" :size="22" tone="info" />
  <TxStatusIcon name="i-ri-translate-2" :size="22" tone="loading" />
</template>

类型与来源

class：使用图标类名（推荐）。
emoji：用于轻量强调。
file / url：本地或远程图标。
builtin：内置常用图标。
colorful 可在组件 prop 或 icon.colorful 中声明；SVG 默认使用 currentColor mask，colorful=true 时保留原色。

API（简版）

属性名	类型	默认值	说明
icon		-	图标对象（type/value）
name		-	图标名称或类名
size			图标尺寸
colorful			是否保留原色
urlResolver	urlfile	-	覆盖 URL/file 路径解析
svgFetcher		-	覆盖 SVG 内容获取逻辑

TxStatusIcon API（简版）

属性名	类型	说明
tone	noneloadingwarningsuccesserrorinfo	状态角标
indicatorSize		角标尺寸
indicatorOffset		角标偏移

渲染契约

name 以 i- 开头时按图标 class 渲染；命中内置名时按 builtin SVG 渲染。
file 与本地绝对 url 可通过注入的 fileProtocol 或 urlResolver 转换。
SVG 在 colorful=false 时通过 mask 使用 currentColor；colorful=true 或 icon.colorful=true 时渲染为原图。
status='loading' | 'error' 会优先展示加载或错误状态。

图标集

图标集	前缀	描述
Remix Icon	`i-ri-`	通用 UI 图标，线条/填充风格
Carbon	`i-carbon-`	IBM 设计系统图标
Simple Icons	`i-simple-icons-`	品牌/Logo 图标

图标搜索

访问 Icônes 在线浏览和搜索所有可用图标。

API 参考

classIcon / getIcon

import { classIcon, getIcon } from '@talex-touch/utils'

const icon = classIcon('i-ri-star-line')
// { type: 'class', value: 'i-ri-star-line' }

const searchIcon = getIcon('Search')
// { type: 'class', value: 'i-ri-search-line' }