アイコン

アイコンは組み込みの lucide サブセット（138 個）からインライン SVG としてレンダリングされます。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	—