Penggunaan

Pelajari cara menggunakan SenangStart Icons dalam projek anda.

Penggunaan Asas

Selepas memasukkan pustaka, anda boleh menggunakan ikon dengan dua cara:

1. Komponen Web

Gunakan elemen tersuai <ss-icon>:

<ss-icon icon="home"></ss-icon>

2. Kelas CSS

Gunakan tag <i> dengan kelas tertentu:

<i class="ss ss-home"></i>

Atribut (<ss-icon>)

icon

Diperlukan. Slug ikon untuk dipaparkan.

<ss-icon icon="magnifying-glass"></ss-icon>
<ss-icon icon="user"></ss-icon>
<ss-icon icon="cog-6-tooth"></ss-icon>

thickness

Tetapkan ketebalan garisan untuk ikon. Lalai adalah 2.

Atribut thickness hanya mengubah komponen <ss-icon>. Ikon kelas CSS menggunakan ketebalan tetap 2.

<ss-icon icon="circle" thickness="1"></ss-icon>
<ss-icon icon="circle" thickness="2"></ss-icon>
<ss-icon icon="circle" thickness="3"></ss-icon>

Nama Ikon Legasi

Nama dan lukisan lama dikekalkan untuk keserasian. Gunakan nama berikut supaya tindakan lebih jelas:

Tindakan	Nama disyorkan	Nama legasi dengan lukisan yang sama
Log masuk (anak panah masuk ke pintu)	sign-in	arrow-right-on-rectangle
Log keluar (anak panah keluar dari pintu)	sign-out	arrow-left-on-rectangle

Gunakan phone-incoming untuk anak panah panggilan masuk dan phone-x-mark untuk gagang telefon dengan tanda X bagi menolak panggilan. Lukisan phone-x-mark telah dibetulkan agar sepadan dengan namanya. Tag carian bukan alias masa jalan.

Penggayaan (Styling)

SenangStart Icons menggunakan currentColor, jadi mereka mewarisi warna teks daripada elemen induk. Anda boleh menggayakan mereka menggunakan CSS standard.

Saiz & Warna

<!-- Melalui kelas utiliti (cth. Tailwind) -->
<ss-icon icon="home" class="w-6 h-6 text-blue-500"></ss-icon>

<!-- Melalui atribut style -->
<ss-icon icon="heart" style="font-size: 32px; color: red;"></ss-icon>

Dalam JavaScript

Anda juga boleh memanipulasi ikon secara programatik:

// Dapatkan elemen ikon
const icon = document.querySelector('ss-icon');

// Tukar ikon
icon.setAttribute('icon', 'check');

// Kemas kini ketebalan
icon.setAttribute('thickness', '2');

// Kemas kini gaya
icon.style.color = 'green';
icon.style.fontSize = '48px';

Kebolehcapaian

Sembunyikan ikon hiasan dengan aria-hidden="true". Gunakan role="img" dan aria-label untuk ikon bermakna yang berdiri sendiri. Bagi butang yang hanya mengandungi ikon, letakkan nama tindakan pada butang:

<!-- Ikon hiasan -->
<ss-icon icon="star" aria-hidden="true"></ss-icon>

<!-- Ikon bermakna -->
<ss-icon icon="exclamation-triangle" role="img" aria-label="Amaran"></ss-icon>

<!-- Butang ikon sahaja -->
<button type="button" aria-label="Buka menu">
  <ss-icon icon="bars-3" aria-hidden="true"></ss-icon>
</button>

<!-- Ikon dengan teks -->
<button>
  <ss-icon icon="save" aria-hidden="true"></ss-icon>
  Simpan
</button>

Corak yang sama terpakai pada ikon CSS: gunakan <i class="ss ss-star" aria-hidden="true"></i> untuk hiasan. Kekalkan label serta keadaan dipilih/ditandakan pada kawalan borang asli; ikon hanya menghiasinya.

Menggunakan Data Ikon (Node.js/SSR)

Jika anda menggunakan SenangStart Icons dalam projek Node.js atau perlu mengakses rentetan SVG secara programatik (cth., untuk SSR atau rendering tersuai), anda boleh mengimport ikon secara berasingan.

ES Modules (Disyorkan)

import icons from '@bookklik/senangstart-icons/icons';

// Akses ikon tertentu
const arrowIcon = icons['arrow-right'];

CommonJS (Legasi)

const icons = require('@bookklik/senangstart-icons/icons');

// Akses ikon tertentu
const arrowIcon = icons['arrow-right'];

Kedua-dua kaedah memberi anda akses kepada rentetan SVG mentah:

console.log(arrowIcon); 
// Output: <svg viewBox="0 0 24 24" ...>...</svg>

Ini berguna apabila anda tidak memerlukan komponen web dan hanya mahukan data ikon.