Icon

TuffEx uses UnoCSS preset-icons to provide a rich icon set, with TuffIcon for unified rendering and control.

Basic Usage

UnoCSS icon classes

<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 (brand) -->
  <i class="i-simple-icons-github" />
  <i class="i-simple-icons-visualstudiocode" />
</template>

TuffIcon component

<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 constants

@talex-touch/utils provides predefined icon constants for consistency:

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

// UI icons
TuffIcons.Home // 'i-ri-home-line'
TuffIcons.Search // 'i-ri-search-line'
TuffIcons.Settings // 'i-ri-settings-3-line'

// Brand icons
AppIcons.VSCode // 'i-simple-icons-visualstudiocode'
AppIcons.GitHub // 'i-simple-icons-github'

Icon categories

Name	Class	Preview
Home	`i-ri-home-line`
Back	`i-ri-arrow-left-line`
Forward	`i-ri-arrow-right-line`
Menu	`i-ri-menu-line`

Actions

Name	Class	Preview
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`

Status

Name	Class	Preview
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`

Files

Name	Class	Preview
File	`i-ri-file-line`
Folder	`i-ri-folder-line`
FileCode	`i-ri-file-code-line`
FileImage	`i-ri-image-line`

UI elements

Name	Class	Preview
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`

Brands

Name	Class	Preview
GitHub	`i-simple-icons-github`
VSCode	`i-simple-icons-visualstudiocode`
Chrome	`i-simple-icons-googlechrome`
Discord	`i-simple-icons-discord`

Custom styles

<template>
  <!-- Size -->
  <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" />

  <!-- Color -->
  <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" />

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

TxStatusIcon

Overlay a status indicator on the bottom-right corner of an icon.

TxStatusIcon

Status overlays for different states.

Demo will load when visible.

<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>

Types & Sources

class: icon class name (recommended).
emoji: lightweight emphasis.
file / url: local or remote icons.
builtin: built-in common icons.
colorful can be declared on the component prop or on icon.colorful; SVG uses a currentColor mask by default and preserves original colors when colorful is true.

API (Lite)

Property	Type	Default	Description
icon		-	Icon object (type/value)
name		-	Icon name or class
size			Icon size
colorful			Keep original colors
urlResolver	urlfile	-	Override URL/file path resolution
svgFetcher		-	Override SVG content fetching

TxStatusIcon API (Lite)

Property	Type	Description
tone	noneloadingwarningsuccesserrorinfo	Status indicator
indicatorSize		Indicator size
indicatorOffset		Indicator offset

Rendering Contract

name values starting with i- render as icon classes; known built-in names render as builtin SVG.
file and local absolute url values can be transformed by injected fileProtocol or urlResolver.
SVG uses a currentColor mask when colorful=false; colorful=true or icon.colorful=true renders the original image.
status='loading' | 'error' takes precedence over normal icon rendering.

Icon sets

Set	Prefix	Description
Remix Icon	`i-ri-`	General UI icons, outline/filled styles
Carbon	`i-carbon-`	IBM design system icons
Simple Icons	`i-simple-icons-`	Brand/logo icons

Icon search

Browse and search icons at Icônes.

API Reference

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' }