nili/ui
enfaartr
Tüm bileşenler

Icon

Genel görünüm
4 export0 varyant ekseni9 prop3 dosya
import { Icon, IconComponent } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

Simge bileşeninin kendisini icon’a verin ya da hazır bir öğeyi çocuk olarak geçin. İki biçim de var; çünkü elinde zaten bir öğe olan bir çağrı yeri onu açmak zorunda kalmamalı.

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>
    </>
  )
}

Boyutlar

size piksel sayısı ya da herhangi bir CSS uzunluğu alır. '1em', simgeyi çevresindeki yazı boyutuna bağlar — bir metin satırının içindeki simge için istediğiniz budur.

piksel boyutları
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>
    </>
  )
}

Renk

Bir simge kendini currentColor ile boyar, yani içinde durduğu şeyden devralır — Button ya da Badge içinde hiçbir renk prop’u olmadan çalışmasının nedeni budur. color kaçış kapısı yerine bir text-* belirteç sınıfını yeğleyin.

bir belirteç sınıfından devralınan
başka bileşenlerin içinde
Bitti
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>
    </>
  )
}

Aynalama

mirrored simgeyi RTL’de yatay çevirir. Yönlü simgelere koyun — oklar, şevronlar, gönder uçağı — ötekilere koymayın: aynalanmış bir saat ya da büyüteç yerelleştirme değil, düpedüz yanlıştır.

ltr
rtl — ilk ikisi döner, üçüncüsü dönmez
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} />
    </>
  )
}

Erişilebilir adlar

Bir simge varsayılan olarak aria-hidden’dır; çünkü neredeyse her simge, anlamını zaten söyleyen bir metnin yanında durur — etiketi yineleyen bir simge, ekran okuyucuya onu iki kez söyletir. label’ı yalnızca simge mesajın tamamıyken verin.

Approved← adlandırıldı, çünkü simge mesajın tamamı
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')} />
    </>
  )
}