Simgeler

icon() satır içi bir <svg> döndürür. Her glif aynı 24×24 ızgarada, currentColor ile doldurulmamış çizgiler olarak çizilir; böylece içinde bulunduğu şeyin rengini ve yazı boyutunu devralır ve kendine ait bir biçimlendirmeye gerek duymaz.

stack({ direction: 'row', gap: 'md', align: 'center' },
  icon('check'),
  icon('search'),
  icon('trash'),
  icon('settings'),
)

Bir bileşende

Simge de diğerleri gibi bir çocuktur. Kendini em cinsinden boyutlandırdığı için, o etiketin ne kadar büyük olduğu kendisine söylenmeden yanındaki etiketle eşleşir:

stack({ direction: 'row', gap: 'sm', align: 'center', wrap: true },
  button({ color: 'primary' }, icon('download'), 'İndir'),
  button({ variant: 'outline' }, icon('external-link'), 'Aç'),
  button({ size: 'sm', variant: 'soft', color: 'danger' }, icon('trash'), 'Sil'),
  iconButton({ label: 'Ara', variant: 'soft', icon: icon('search') }),
)

Boyut

Varsayılan 1em — çevresindeki metnin boyutu. Ondan ayrılmak istediğinizde size bir belirteç ya da herhangi bir CSS uzunluğu alır:

stack({ direction: 'row', gap: 'md', align: 'center' },
  icon('star', { size: 'sm' }),
  icon('star'),
  icon('star', { size: 'lg' }),
  icon('star', { size: '2rem' }),
  icon('star', { size: '3rem' }),
)

Renk

Renk propu yoktur. Bir simge currentColor ile çizilir, bu yüzden bağlamının rengini alır — tek bir kümenin beş palet içinde çalışmasını sağlayan şey budur:

stack({ direction: 'row', gap: 'md', align: 'center' },
  text({ style: 'color: var(--su-primary)' }, icon('heart', { size: 'lg' })),
  text({ style: 'color: var(--su-success)' }, icon('check-circle', { size: 'lg' })),
  text({ style: 'color: var(--su-warning)' }, icon('alert-triangle', { size: 'lg' })),
  text({ style: 'color: var(--su-danger)' }, icon('x-circle', { size: 'lg' })),
  text({ tone: 'muted' }, icon('info', { size: 'lg' })),
)

Erişilebilir adlar

Bir simge varsayılan olarak aria-hidden taşır; bu çoğu zaman doğrudur: “Sil” sözcüğünün yanındaki bir simge ikinci kez duyurulmamalıdır. Ona yalnızca simge bütün anlamı taşıdığında bir label verin; o zaman bu adla role="img" olur.

icon('trash')                      // süs — gizli
button(icon('trash'), 'Sil')       // konuşan, sözcüğün kendisi

icon('trash', { label: 'Sil' })    // bir görsel olarak duyurulur

// Yalnızca simgeli bir düğme, içindeki glifi değil düğmeyi etiketler
iconButton({ label: 'Sil', icon: icon('trash') })

Dolu

filled bir glifi çerçevelemek yerine boyar. Her iki durumda da yol aynıdır — yalnızca fill özniteliği değişir — bu yüzden iki biçim dış kenarı tam olarak paylaşır ve birbirinden ayrışamaz.

stack({ direction: 'row', gap: 'md', align: 'center' },
  icon('bell', { size: 'lg' }),
  icon('bookmark', { size: 'lg' }),
  icon('folder', { size: 'lg' }),
  icon('heart', { size: 'lg' }),
  icon('star', { size: 'lg' }),
)

Ve aynı adlar dolu hâlde:

stack({ direction: 'row', gap: 'md', align: 'center' },
  icon('bell', { filled: true, size: 'lg' }),
  icon('bookmark', { filled: true, size: 'lg' }),
  icon('folder', { filled: true, size: 'lg' }),
  icon('heart', { filled: true, size: 'lg' }),
  icon('star', { filled: true, size: 'lg' }),
)

Bu, ikinci bir ad kümesi değil de bir prop olarak var; çünkü dolu olma hâli neredeyse her zaman bir durumdur — kaydedildi, beğenildi, puanlandı — dolayısıyla farklı bir dize değil, bir mantıksal değer ister:

icon('heart', { filled: liked })
icon('bookmark', { filled: saved, label: saved ? 'Kaydedildi' : 'Kaydet' })

// bunun yerine
icon(liked ? 'heart-filled' : 'heart')

Durum glifleri farklı doldurulur, çünkü işaretleri şeklin içinde durur. Daireyi boyamak işareti yutardı, bu yüzden işaret onun içinden oyulur:

stack({ direction: 'row', gap: 'md', align: 'center' },
  icon('check-circle', { filled: true, size: 'lg' }),
  icon('x-circle', { filled: true, size: 'lg' }),
  icon('info', { filled: true, size: 'lg' }),
  icon('help', { filled: true, size: 'lg' }),
  icon('alert-triangle', { filled: true, size: 'lg' }),
)

Bunlar ikinci bir çizim taşır — fill-rule: evenodd ile işareti kesilmiş dolu şekil — çünkü bir oyma, bir özniteliği değiştirerek çerçeve yolundan elde edilemez. Dış şekil çerçevenin dış kenarında çizilir, böylece iki biçim yine aynı siluette biter. Her iki durumda da prop aynıdır; bir glifin hangi düzeneği kullandığı kendi bileceği iştir.

Bir ok işaretinin boyanacak bir içi hiç yoktur — açık bir çizgidir — bu yüzden köşeleri yuvarlayan çizgiyi koruyarak kendi üç noktasının betimlediği üçgene dolar:

stack({ direction: 'row', gap: 'md', align: 'center' },
  icon('chevron-up', { filled: true, size: 'lg' }),
  icon('chevron-down', { filled: true, size: 'lg' }),
  icon('chevron-left', { filled: true, size: 'lg' }),
  icon('chevron-right', { filled: true, size: 'lg' }),
)

fillableIcons(), filled propuna yanıt veren her şeyi listeler. Dolu biçimi olmayan bir glif onu yok sayar ve çerçeveli kalır — eye glifini doldurmak göz bebeğini, tag glifini doldurmak deliğini yitirirdi, bu yüzden ikisi de öyleymiş gibi yapmaz.

Dönme

spin glifi döndürür — spinner için düşünülmüştür, gerçi bir şey yeniden yüklenirken refresh glifini döndürmenize engel yoktur. prefers-reduced-motion altında durmak yerine sürünecek kadar yavaşlar, çünkü duran bir döndürücü bozuk görünür.

stack({ direction: 'row', gap: 'md', align: 'center' },
  icon('spinner', { spin: true, size: 'lg' }),
  icon('refresh', { spin: true, size: 'lg' }),
  button({ variant: 'soft' }, icon('spinner', { spin: true }), 'Kaydediliyor…'),
)

Küme

Adlar, yaptıkları işi değil çizimi betimler — error değil x-circle — çünkü aynı çizim birbiriyle ilgisiz işler için kullanılır ve resmi betimleyen bir ad, bu olduğunda da doğru kalır. Aşağıdaki takma adlar yaygın niyetleri karşılar.

Markalar

Kümeyle birlikte sekiz marka işareti gelir — facebook, google, instagram, linkedin, tiktok, whatsapp, x-twitter ve youtube. Onlar da size ve label alır ve yine currentColor ile çizilir:

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  icon('facebook', { size: 'lg' }),
  icon('instagram', { size: 'lg' }),
  icon('x-twitter', { size: 'lg' }),
  icon('youtube', { size: 'lg' }),
  icon('whatsapp', { size: 'lg' }),
  button({ variant: 'soft', color: 'neutral' }, icon('linkedin'), 'Paylaş'),
)

Bunlar bu kitaplığın biçemindeki çizimler değil, başkalarının işaretlerinin kopyalarıdır; bu yüzden kitaplığın iki kuralını bilerek çiğnerler: çizgi değil dolu şekillerdir, ki bir logo da odur, ve oranları bu ızgaranın değil markanın oranlarıdır. filled onlar için hiçbir anlam taşımaz — zaten öyleler.

Çizimler, onları CC0 ile yayımlayan Simple Icons’tan geliyor. Bu, ticari markayı değil çizimi kapsar: bunları adlandırdıkları şeyi göstermek için kullanın — bir profil bağlantısı, bir paylaşma düğmesi — kendi ürününüzün üzerinde değil.

x değil x-twitter olmasının nedeni, x adının zaten close için bir takma ad olması ve bir kapatma düğmesinin logoya dönüşmesinin tatsız bir sürpriz olacak olmasıdır. twitter de buna çözümlenir.

Takma adlar

Bunların her biri yukarıda listelenen bir glifi, daha çok uzanacağınız adla işler:

Kendi simgeleriniz

registerIcons() bir glif ekler ya da yerleşik birini değiştirir. Biçimlendirme, <svg> öğesinin içeriğidir — aynı 24×24 ızgaradaki şekiller, currentColor onlara ulaşsın diye doldurulmamış bırakılmış. Sayfalarınızın içe aktardığı bir modülden bir kez çağırın:

import { registerIcons } from 'sitelo/ui'

registerIcons({
  logo: '<path d="M4 20 12 4l8 16z"/>',
  // Zaten var olan bir ad onu her yerde değiştirir; bir yerleşiği
  // kitaplığı çatallamadan yeniden biçimlendirmenin yolu budur.
  check: '<path d="m5 13 4 4 10-11"/>',
  // Tek bir kapalı şekil, böylece yerleşikler gibi `filled` propuna yanıt verebilir.
  pin: { markup: '<path d="M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z"/>', fillable: true },
})

import { icon } from 'sitelo/ui'

icon('logo')                  // sizin glifiniz
icon('check')                 // artık bu da sizin

registerIcons({ check: null }) // ve yerleşiğe geri dönüş

Neden satır içi, neden bir sprite değil

Simgeler, bir icons.svg dosyasından <use> ile çekilmek yerine sayfaya işlenir. Bir sprite sayfa başına yüz gzip baytı mertebesinde HTML tasarruf ettirir ve bunun için bir gidiş dönüşe mal olur — yinelenen biçimlendirme tam da gzip’in en iyi olduğu durumdur, yani bir sprite’ın var olma nedeni olan yinelemenin çoğu zaten ayıklanmıştır. Satır içi olmak ayrıca üretilecek bir dosya, yapılandırılacak bir temel yol ve dist içinden kaybolabilecek hiçbir şey olmaması demektir — styles({ inline: true }) işlevinin yaptığı takasın aynısı.

Proplar

Bilinmeyen bir ad hata fırlatmak yerine hiçbir şey işlemez — süse dair bir prop bir derlemeyi düşürebilmemelidir. hasIcon(name) birinin var olup olmadığını söyler, iconNames() hepsini listeler, fillableIcons() ise filled propunu alanları.