Svg — vektor dari XML atau aset

Komponen Svg dari NexaJS merender grafik vektor di React Native dari string XML atau (sesuai API) dari kunci aset. Layar demo memuat beberapa contoh: XML statis, path, ukuran dinamis dengan tombol ±, pewarnaan interaktif, gaya pada wadah vs isi vektor, ilustrasi kompleks, dan beberapa ikon sebaris.

Alur penggunaan di aplikasi

Integrasi navigator — Pada template bawaan, modul layar Svg belum selalu terdaftar di MenuComponents. Tambahkan entri sendiri (mis. name: "Svg") atau sertakan komponen di stack/tab Anda, lalu navigasikan dengan nama route yang sama. MenuComponents · Konfigurasi route.
Render — Root memakai SafeAreaView dan ScrollView agar konten panjang dan area aman perangkat terjaga. State lokal mengontrol ukuran dan warna isian untuk bagian interaktif.

Cuplikan cepat

XML string + dimensi

import { Svg, View } from "NexaJS";

const circleXml = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="#24BCA9" />
  </svg>
`;

<View>
  <Svg xml={circleXml} width={100} height={100} />
</View>

Warna + ukuran beda

<Svg xml={circleXml} width={48} height={48} color="#FF6B6B" />

Opsi dari aset (ganti kunci)

import { Svg } from "NexaJS";

<Svg source="namaKunciDiAssetsImage" width={80} height={80} />

Import

Komponen UI utama dari NexaJS: View, StyleSheet, ScrollView, SafeAreaView, Text, TouchableOpacity, Svg. Helper assetsImage diimpor pada referensi untuk dokumentasi prop source meski contoh JSX di layar memakai string xml saja. FontFamily dipakai pada gaya teks judul. useState diambil dari react untuk ukuran dan warna dinamis.

Properti `Svg`

Prop	Peran
`xml`	String markup SVG (satu root `<svg>`).
`source`	Kunci pada `assetsImage` untuk memuat SVG dari aset terdaftar (alternatif dari `xml`).
`width` / `height`	Dimensi tampilan (angka). Default referensi API: 100 jika tidak diisi.
`style`	Gaya wadah luar komponen.
`svgStyle`	Gaya yang diterapkan pada lapisan vektor (contoh: `opacity`).
`color`	Override warna isian (`fill`) untuk skenario sederhana.

Varian pada layar demo

XML langsung — Lingkaran + teks; width/height 100.
Path — Ikon lapisan dari elemen path.
Ukuran dinamis — State 50–200 px, langkah 20, tombol TouchableOpacity.
Warna — Palet tombol bulat mengubah color; fallback default teal.
Gaya ganda — style pada wadah dan svgStyle pada vektor.
Ilustrasi kompleks — Satu string SVG besar (undraw-style) diperkecil ke 200×160.
Baris ganda — Tiga Svg dalam row dengan ukuran 60 dan satu varian color.

Praktik yang disarankan

SVG sangat panjang sebaiknya dipindah ke file aset atau modul terpisah agar bundler dan diff kode tetap ringan.
Validasi string XML di lingkungan dev; markup rusak sering menyebabkan layar kosong tanya pesan jelas.
Selaraskan warna dinamis dengan token Colors bila memungkinkan.
Hapus impor yang tidak dipakai (assetsImage jika hanya memakai xml) untuk menjaga peringatan linter bersih.

Nxdom Framework