Icon

Icon được render dạng SVG inline, lấy từ bộ lucide có sẵn (138 icon). Có thể đăng ký thêm icon (SVG, hoặc class của một bộ font icon bất kỳ) bằng registerIcons() hoặc config.icons.

Icon có sẵn

Icon có sẵn

Vue

<div class="icon-grid">
  <div v-for="n in names" :key="n" class="icon-cell"><ThlIcon :name="n" :size="22" /><small>{{ n }}</small></div>
</div>

React

import { Icon } from '@thl-ui/react';
<Icon name="bell" size={22} />
<Icon name="heart" label="Favourite" />   {/* label → role="img" */}

Angular

<thl-icon name="bell" [size]="22" />
<thl-icon name="heart" label="Favourite" />

Đăng ký icon

import { registerIcons } from '@thl-ui/icons';

registerIcons({
  // node SVG (định dạng lucide)…
  logo: [['path', { d: 'M12 2 2 7l10 5 10-5-10-5z' }]],
  // …SVG thô…
  brand: { svg: '<circle cx="12" cy="12" r="10"/>', viewBox: '0 0 24 24' },
  // …hoặc class font icon
  'fa-user': { className: 'fa fa-user' },
  'ti-home': { className: 'ti-home' },
});

Hoặc truyền icons vào cấu hình adapter (app.use(ThlUI, { icons }), <ThlProvider config=>, provideThlUI({ icons })). Mọi prop tên icon của component đều nhận các tên này.

API

Icon

<ThlIcon> · import { ThlIcon } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
name*	string	—
size	any	—
label	string	—
strokeWidth	number	—