أيقونة 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

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
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'