Icon

Usage

Class Icons

<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

In TuffIcon (alias TxIcon), name takes a class or built-in name and icon takes a structured source.

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

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'

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>

Status Indicator

tone on TxStatusIcon overlays a status dot on the icon's bottom-right corner.

OS Icons

TxOsIcon detects the platform from platform and os.

Icon Sources

Set colorful on the component or as icon.colorful.

Best Practices

• Prefer UnoCSS classes (i-*) in product UI, since they inherit currentColor; use TxIconSource for status, URL / file resolution, or original colors.
• Set alt only when the icon itself carries meaning; let surrounding text describe decorative icons.
• Keep colorful=false for monochrome SVGs so they follow the theme; set colorful=true for brand marks and multi-color art.
• Inject TX_ICON_CONFIG_KEY once at the app shell instead of passing resolvers to every icon.
• Pair TxOsIcon with visible platform text and size it with CSS font-size; treat the fallback glyph as a visual default, not a validation result.

API Reference

TxIcon

Props

Slots

TxStatusIcon

Props

icon, name, alt, and empty work as on TxIcon.

TxOsIcon

Props

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

Icon sets

Icon search

Browse and search every icon at Icônes.

Overview

• A name starting with i- renders as a class, a built-in name renders its SVG, and anything else renders as a class — showing nothing if no such class exists.
• file values and local absolute url values pass through the injected fileProtocol or urlResolver.
• With colorful=false, a monochrome SVG whose content is readable (data URL or svgFetcher) renders as a currentColor mask; multi-color or unreadable SVGs render as images.
• An icon.status of loading or error takes precedence over the icon.
• With alt, the root is role="img" with a title; without it, the root is aria-hidden="true".
• TxOsIcon joins and lowercases platform and os to detect macOS / Windows / Linux, falling back to macOS; its SVG is aria-hidden.

Technologies

• shouldRenderSvgAsMask checks whether every paint color in an SVG is neutral or currentColor to decide on mask rendering.
• TX_ICON_CONFIG_KEY injects urlResolver, svgFetcher, and fileProtocol.
• Source: packages/tuffex/packages/components/src/icon/.