Значок

Компонент значка с семантической нагрузкой, основанный на встроенном наборе 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)" />
    </>
  )
}

Props компонента Icon

Проп	Описание	Тип	Допустимые значения	По умолчанию
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'