Icono

Componente de iconos semánticos, basado en el catálogo de iconos SVG integrado.

Uso básico

Uso básico

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

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
name	Nombre del icono	LhIconName	Ver @lh-ui/share/core/icon	—
size	Tamaño	number | 'small' | 'middle' | 'large'	—	Sigue ConfigProvider
color	Color	string	—	currentColor
decorative	Modo decorativo (emite aria-hidden)	boolean	—	true
ariaLabel	Etiqueta de accesibilidad (actúa cuando decorative={false})	string	—	—
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
sx	Props rápidas de layout	SxProps	—	—

Accesibilidad

Por defecto decorative es true, de modo que el icono es invisible para el lector de pantalla. Si el icono lleva una semántica, pasa decorative={false} y ariaLabel: se renderizará entonces como <svg role="img" aria-label>.

Valor de respaldo con children

Si no se pasa name pero sí children, el componente renderiza directamente children (para envolver SVG personalizados):

<LhIcon><MyCustomSvg /></LhIcon>

Estilos

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