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'