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="search"></ss-icon>
<ss-icon icon="user"></ss-icon>
<ss-icon icon="settings"></ss-icon>

thickness

Tetapkan ketebalan garisan untuk ikon. Lalai adalah 1.5.

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

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

Untuk kebolehcapaian yang lebih baik, tambah aria-label atau aria-hidden:

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

<!-- Ikon bermakna -->
<ss-icon icon="warning" aria-label="Amaran"></ss-icon>

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

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.