Icon — set Material, Feather, Ion

Komponen Icon dari NexaJS merender glyph dari pustaka ikon berbeda tergantung properti yang Anda berikan: satu objek konfigurasi memuat tepat satu “family” (Material, Feather, atau Ion) beserta nama ikon, ukuran, dan warna. Layar demo mengelompokkan ikon per family dan menampilkan satu baris variasi ukuran untuk ikon yang sama.

Alur penggunaan di aplikasi

Pendaftaran route — Modul layar Icon diekspor sebagai default; di menu, nama route "Icon" (judul: "Icon").
Navigasi — navigation.navigate("Icon"). Konfigurasi route · MenuComponents.
Render — ScrollView berisi judul halaman, beberapa blok section dengan judul + grid ikon, lalu blok tambahan untuk variasi ukuran. Setiap sel memuat <Icon {...props} /> dan label nama di bawahnya.

Cuplikan cepat

Tiga family dalam satu layar

import { View, Text, Icon, Colors } from "NexaJS";

<View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
  <Icon Material="home" size={24} color={Colors.primary500} name="home" />
  <Icon Feather="mail" size={24} color={Colors.info500} name="mail" />
  <Icon Ion="settings" size={24} color={Colors.grey700} name="settings" />
</View>

Ikon + label

import { View, Text, Icon, Colors } from "NexaJS";

<View style={{ alignItems: "center", width: 72 }}>
  <Icon Material="heart" size={28} color={Colors.error500} name="heart" />
  <Text style={{ fontSize: 11, marginTop: 4 }}>Favorit</Text>
</View>

Konfigurasi per glyph

Spread props ke Icon dari objek yang memuat salah satu kunci family berikut (satu aktif per objek):

Kunci	Peran
`Material`	String nama ikon Material (contoh: `home`, `magnify`).
`Feather`	Nama ikon Feather (contoh: `user`, `alert-circle`).
`Ion`	Nama Ionicons (contoh: `notifications`, `person`).
`size`	Ukuran dalam piksel logis (demo banyak memakai 24; variasi 16–48).
`color`	Warna glyph — pada referensi memakai token `Colors.*`.
`name`	Label teks di bawah ikon (boleh sama dengan nama ikon atau deskriptif seperti “size 24”).

Section dan grid

Pola berulang: wadah section dengan judul, lalu baris yang membungkus dengan flexWrap dan gap. Setiap item berukuran lebar tetap (~80) dengan ikon terpusat. Section memakai latar terang, padding, radius, dan bayangan ringan agar terpisah dari latar scroll.

Import umum pada layar demo

Dari NexaJS: View, StyleSheet, Text, ScrollView, Icon, Colors. Pada berkas referensi, useState ikut diimpor tetapi tidak dipakai — bisa dihapus untuk menghindari peringatan linter.

Praktik yang disarankan

Pilih satu family per layar atau per komponen agar bundle dan gaya konsisten; campur hanya bila desain mengharuskan.
Gunakan Colors untuk warna ikon agar selaras dengan tema aplikasi.
Untuk daftar panjang, pertimbangkan virtualisasi; ScrollView + banyak ikon masih ringan pada demo.
Pastikan nama string ikon valid di pustaka yang dipilih — salah ketik sering menghasilkan kotak kosong tanpa error tegas.

Nxdom Framework