图标

图标以内联 SVG 渲染，来自内置的 lucide 子集（138 个图标）。可通过 registerIcons() 或 config.icons 注册更多图标——SVG，或任意图标字体的类名。

内置图标

内置图标

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

注册图标

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

registerIcons({
  // SVG 路径节点（lucide 格式）…
  logo: [['path', { d: 'M12 2 2 7l10 5 10-5-10-5z' }]],
  // …原始 SVG…
  brand: { svg: '<circle cx="12" cy="12" r="10"/>', viewBox: '0 0 24 24' },
  // …或图标字体的类名
  'fa-user': { className: 'fa fa-user' },
  'ti-home': { className: 'ti-home' },
});

也可以在适配器配置中传入 icons（app.use(ThlUI, { icons })、<ThlProvider config=>、provideThlUI({ icons })）。所有名为 icon 的组件 prop 都接受这些名称。

API

Icon

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

Prop	类型	默认值
name*	string	—
size	any	—
label	string	—
strokeWidth	number	—