Icon アイコン

内蔵 SVG アイコンセットに基づく、セマンティックなアイコンコンポーネントです。

基本的な使い方

基本的な使い方

import { LhIcon } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhIcon name="search" />
      <LhIcon name="search" size={32} />
      <LhIcon name="search" color="var(--lh-primary-color, #1677ff)" />
      <LhIcon name="loading" color="var(--lh-success-color, #52c41a)" />
    </>
  )
}

Icon Props

プロパティ	説明	型	使用可能な値	デフォルト値
name	アイコン名	LhIconName	@lh-ui/share/core/icon を参照	—
size	サイズ	number | 'small' | 'middle' | 'large'	—	ConfigProvider に準拠
color	色	string	—	currentColor
decorative	装飾モード（aria-hidden を出力）	boolean	—	true
ariaLabel	アクセシビリティラベル（decorative={false} の時に有効）	string	—	—
themeVars	コンポーネントレベルのテーマ変数	Record<string, string>	—	—
sx	クイックレイアウトプロパティ	SxProps	—	—

アクセシビリティ

デフォルトで decorative は true で、アイコンはスクリーンリーダーから見えません。アイコンがセマンティクスを担う場合は decorative={false} と ariaLabel を渡してください。この時 <svg role="img" aria-label> として描画されます。

children のフォールバック

name を渡さずに children を渡した場合、コンポーネントは children をそのまま描画します（カスタム SVG をラップする用途）：

<LhIcon><MyCustomSvg /></LhIcon>

スタイル

import '@lh-ui/react/style/icon'