nili/ui
enfaartr
كل المكوّنات

Icon

عرض شامل
٤ تصدير٠ محور تنويع٩ خاصيّة٣ ملف
import { Icon, IconComponent } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

أساسي

مرِّر مكوّن الأيقونة نفسه إلى icon، أو عنصرًا جاهزًا كابن. الشكلان موجودان لأن موضع استدعاء يحمل عنصرًا أصلًا لا ينبغي أن يُضطر إلى تفكيكه.

import { Icon } from "@nili/ui"
import { RiSearchLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      {/* the component */}
      <Icon icon={RiSearchLine} />

      {/* or an element */}
      <Icon>
        <RiSearchLine />
      </Icon>
    </>
  )
}

الأحجام

يقبل size عددًا بالبكسل أو أي طول CSS. وتجعل '1em' الأيقونة تتبع حجم الخط المحيط، وهو المطلوب لأيقونة داخل سطر نصّي.

أحجام بالبكسل
16
20
24
32
40
size="1em"

Search

Search

Search

Search 

import { Icon } from "@nili/ui"
import { RiSearchLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Icon icon={RiSearchLine} size={16} />
      <Icon icon={RiSearchLine} size={24} />
      <Icon icon={RiSearchLine} size={40} />

      {/* follows the text around it */}
      <p className="text-[20px]">
        {t('sizes.search')} <Icon icon={RiSearchLine} size="1em" />
      </p>
    </>
  )
}

اللون

ترسم الأيقونة نفسها بـcurrentColor، فترث اللون ممّا تجلس داخله — ولهذا تعمل داخل Button أو Badge بلا أي خاصية لون. وفضّل صنف الرمز text-* على مخرج الطوارئ color.

موروث من صنف رمز
داخل مكوّنات أخرى
تم
import { Icon, Button, Badge } from "@nili/ui"
import { RiCheckLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      {/* inherits */}
      <span className="text-success-base">
        <Icon icon={RiCheckLine} />
      </span>

      {/* inside a control, with nothing to say */}
      <Button startIcon={<Icon icon={RiCheckLine} />}>
                {t('colour.approve')}
              </Button>
      <Badge color="green" startIcon={<Icon icon={RiCheckLine} />}>Done</Badge>
    </>
  )
}

الانعكاس

يقلب mirrored الأيقونة أفقيًا في الاتجاه من اليمين إلى اليسار. ضعه على الأيقونات الاتجاهية — الأسهم والزوايا وطائرة الإرسال — ودعه عن غيرها: فالساعة أو العدسة المعكوسة خطأ لا توطين.

ltr
من اليمين إلى اليسار — الأوليان تنعكسان والثالثة لا
import { Icon } from "@nili/ui"
import { RiArrowRightSLine, RiSearchLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      {/* directional — flips in Persian */}
      <Icon icon={RiArrowRightSLine} mirrored />

      {/* not directional — must not flip */}
      <Icon icon={RiSearchLine} />
    </>
  )
}

الأسماء الوصفية

الأيقونة aria-hidden افتراضيًا، لأن كل أيقونة تقريبًا تجلس بجوار نص يقول معناها — وأيقونة تكرّر التسمية تجعل قارئ الشاشة ينطقها مرتين. مرِّر label فقط حين تكون الأيقونة هي الرسالة كلها.

Approved← مسمّاة، لأن الأيقونة هي الرسالة كلها
import { Icon } from "@nili/ui"
import { RiCheckLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      {/* decorative: the word "Approved" is right there */}
      <span>
        <Icon icon={RiCheckLine} /> {t('names.approved')}
      </span>

      {/* meaningful: nothing else says this row passed */}
      <Icon icon={RiCheckLine} label={t('names.passed')} />
    </>
  )
}