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 بدون هیچ پراپ رنگی کار می‌کند. به‌جای راه فرارِ color، یک کلاس توکنِ text-* را ترجیح دهید.

ارث‌بری از یک کلاس توکن
داخل کامپوننت‌های دیگر
انجام شد
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')} />
    </>
  )
}