Icône

Composant d'icône sémantique, fondé sur le jeu d'icônes SVG intégré.

Utilisation de base

Utilisation de base

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	Description	Type	Options	Valeur par défaut
name	Nom de l'icône	LhIconName	Voir @lh-ui/share/core/icon	—
size	Taille	number | 'small' | 'middle' | 'large'	—	Selon ConfigProvider
color	Couleur	string	—	currentColor
decorative	Décorative ou non (produit aria-hidden)	boolean	—	true
ariaLabel	Étiquette d'accessibilité (active lorsque decorative={false})	string	—	—
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
sx	Raccourci de mise en page	SxProps	—	—

Accessibilité

Par défaut, decorative vaut true : l'icône est invisible pour les lecteurs d'écran. Si l'icône porte un sens, passez decorative={false} et ariaLabel : elle est alors rendue sous forme de <svg role="img" aria-label>.

Repli sur children

Lorsque name n'est pas fourni mais children l'est, le composant rend directement children (pour envelopper un SVG personnalisé) :

<LhIcon><MyCustomSvg /></LhIcon>

Styles

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