Ikonografi

Seluruh koleksi Iconify

W4cIcon bisa menggambar koleksi Iconify apa pun — lebih dari 200 set, dan tidak perlu memasang paket apa pun lebih dulu (#027). Layer ini menyetel fallbackToApi, jadi nama seperti mdi:recycle atau logos:vue langsung bekerja:

Browser pembaca tidak pernah menghubungi Iconify. Ikonnya selalu datang dari server aplikasi sendiri: ditanam ke dalam HTML saat render server, atau diminta dari /api/_nuxt_icon/… milik aplikasi itu. Jadi tidak ada permintaan pihak ketiga dari sisi pengunjung, dan CSP tidak perlu dibuka ke domain luar.

Yang perlu diketahui: server-nya yang mengambil dari API Iconify untuk koleksi yang paketnya tidak dipasang, lalu menyimpannya. Artinya server butuh jalan keluar ke internet, dan pemakaian pertama sebuah ikon tak biasa membayar satu perjalanan. Lucide tidak pernah melewati itu karena paketnya (@iconify-json/lucide) ikut terpasang. Untuk membuat koleksi lain ikut lokal, pasang paketnya di aplikasi: bun add -D @iconify-json/tabler.

Satu set untuk satu antarmuka. Bebas memilih set mana pun, tapi pilih satu dan bertahan di situ: mencampur dua set membuat ketebalan garis dan sudut potongnya berbeda, dan itu langsung terlihat begitu dua ikon berdiri bersebelahan. Pengecualiannya hal yang memang tidak ada padanannya — logo merek, misalnya. Komponen W4C sendiri memakai Lucide (#011), jadi itu set yang paling mudah disambung kalau aplikasi belum punya pilihan.

Nama-nama di atas sudah dipakai di seluruh komponen dan contoh, jadi memakainya kembali membuat aplikasi terbaca satu bahasa. Cari ikon lain — dari set mana pun — di icon-sets.iconify.design; set Lucide adalah jalan pintas ke set yang dipakai komponen. Pakai peramban Iconify dan bukan situs masing-masing set, karena yang disalinnya adalah nama lengkap seperti mdi:recycle yang diterima W4cIcon — situs set biasanya memberi potongan SVG atau komponen React.

Ukuran

Ikon mengikuti ukuran teks di sebelahnya, bukan ukuran ruang yang tersedia. Di dalam komponen, ukurannya sudah ditentukan oleh prop size komponen itu.

svg atau css

W4cIcon punya dua cara menggambar. Bawaannya SVG sungguhan; mode="css" menggambarnya sebagai mask di dalam satu <span>. Di dalam komponen kami hampir selalu memakai css: satu elemen lebih ringan ketika ikonnya berulang di setiap baris tabel atau setiap item menu.

<!-- Bawaan: SVG sungguhan. Pakai ini kalau ikonnya berdiri
     sendiri dan perlu punya nama. -->
<W4cIcon name="lucide:truck" :size="18" aria-label="Armada" />

<!-- mode="css" menggambarnya sebagai mask di dalam satu <span>:
     lebih ringan saat ikonnya banyak dan berulang, dan warnanya
     mengikuti currentColor. Dipakai di dalam komponen. -->
<W4cIcon mode="css" name="lucide:check" class="size-4" aria-hidden="true" />

Satu konsekuensi yang perlu diingat saat menulis test: mode="css" tidak menghasilkan <svg>, jadi locator('svg') tidak menemukan apa pun.

Ikon dan nama

Ikon tidak membawa arti untuk pembaca layar, dan sebagian orang tidak bisa menebak artinya. Aturannya:

• Ikon yang menemani teks selalu aria-hidden="true" — kalau tidak, namanya dibacakan dua kali.
• Kontrol yang hanya ikon wajib punya nama yang menyebutkan tindakannya: “Salin kode referensi”, bukan “Salin”; “Buka navigasi dokumentasi”, bukan “Menu”.
• Ikon sendirian tidak boleh menjadi satu-satunya penanda status. Titik warna selalu didampingi kata — itu sebabnya W4cBadge dengan dot tetap meminta teks.
• Jangan memakai ikon sebagai hiasan pengisi ruang. Kalau ikonnya tidak menambah kejelasan, halaman lebih tenang tanpanya.