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'