NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

NX.Svg — komponen SVG (DOM)

Factory NX.Svg(options) membangun ilustrasi SVG di browser / Electron: mengembalikan satu HTMLElement (wrapper div.svg-container) berisi <svg> hasil parse. Pola vanilla DOM (bukan JSX).

Lokasi kode

Bagian Path
Factory Svg assets/modules/Svg/index.js
Koleksi name assets/modules/Svg/svgContent.js
Asset string per key assets/modules/Svg/localImage.js (assetsImage)
Ekspor global assets/modules/nxdom.js → NX.Svg, NX.svgContent
Demo route SPA templates/Svg.js (rute svg di App.js)

Fitur

  • Sumber: xml (string), name (kunci svgContent), atau source (string SVG terdaftar di assetsImage)
  • Ukuran: width / height (default 100) → atribut pada <svg> (angka atau string, mis. "100%")
  • Aksen warna: fill (atau color, deprecated) mengganti literal #17B8A6 di string SVG (pola undraw)
  • Gaya: style pada container, svgStyle pada <svg>
  • Markup: className pada container; id, class, data-* lewat sisa opsi → atribut pada <svg>
  • Error: jika nama / sumber tidak ada atau parse gagal → div.svg-error dengan pesan singkat

Prioritas sumber konten

  1. Jika xml ada (string non-kosong), dipakai dulu.
  2. Jika belum ada konten dan name diisi → NX.svgContent[name].
  3. Jika masih belum ada dan source diisi → assetsImage.get(source) di modul Svg; nilai harus string isi SVG. Key default bisa kosong sampai register di localImage.js.

Penggunaan dasar

1. Dari koleksi (name)

Kunci bawaan saat ini: forgot, nxdom, qr (lihat svgContent.js).

const el = NX.Svg({ name: 'forgot', width: 200, height: 178, fill: '#CB2F2F', className: 'demo-svg-forgot', }); document.querySelector('#row').appendChild(el);

2. Dari string XML (xml)

const el = NX.Svg({ xml: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#17B8A6"/></svg>', width: 56, height: 56, id: 'ikon-custom', }); container.appendChild(el);

3. fill / color

Hanya substring fill="#17B8A6" dan fill='#17B8A6' yang diganti. SVG tanpa warna itu tidak berubah.

NX.Svg({ name: 'nexa', width: 220, height: 176, fill: '#2563eb' });

4. Container vs inner SVG

NX.Svg({ name: 'qr', width: 180, height: 110, style: { padding: '8px', background: '#f8fafc' }, svgStyle: { filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.08))' }, className: 'kartu-qr', });

5. Akses koleksi mentah (NX.svgContent)

const keys = Object.keys(NX.svgContent); const xmlString = NX.svgContent.forgot; // NX.Svg({ xml: xmlString, ... })

6. source + assetsImage

source membaca singleton assetsImage di modul Svg. Key harus mengarah ke string SVG penuh, biasanya lewat register(key, svgString) di registerDefaultAssets() atau init Anda di localImage.js. NX tidak mengekspor assetsImage; integrasi di sisi modul Svg (impor langsung dari index.js jika perlu).

// Di localImage.js: register('logoSvg', '<svg ...>...</svg>'); NX.Svg({ source: 'logoSvg', width: 64, height: 64 });

Bukan konstruktor

Panggil sebagai fungsi, bukan new:

NX.Svg({ name: 'nexa', width: 120, height: 120 }); // new NX.Svg({ ... }) // salah

Demo di SPA (NexaRoute)

Halaman /svg memuat contoh seperti templates/Svg.js: forgot + fill, nxdom, qr, dan satu SVG xml inline. Pastikan rute 'svg' terdaftar di App.js dan Nexa sudah memuat NX.

NX.Svg(options) — API

Opsi Tipe Default Keterangan
xml string — SVG mentah; menang atas name / source jika terisi
name string — Kunci di NX.svgContent
source string — Key assetsImage; nilai string SVG
width number | string 100 Atribut width pada <svg>
height number | string 100 Atribut height pada <svg>
fill string — Ganti fill="#17B8A6" / '#17B8A6'
color string — Alias fill (deprecated)
style object {} Object.assign ke style wrapper
svgStyle object {} Style pada node <svg>
className string '' Kelas pada wrapper svg-container
…props object — id, class, data-* → atribut pada <svg>

Return: HTMLElement — .svg-container berisi <svg>, atau .svg-error jika gagal.

NX.svgContent

Objek string SVG (isi sama dengan export di svgContent.js).

SvgComponent (modul)

Di index.js: SvgComponent(props) = Svg(props). Dari bundel utama pakai NX.Svg.

Menambah SVG baru

  1. Tambah konstanta template di svgContent.js (atau import terpisah).
  2. Registrasikan di object svgContent:
export const svgContent = { forgot: forgotSvg, nexa: nexaSvg, qr: qrSvg, custom: customSvg, };

Untuk undraw yang ingin di-recolor dengan fill, pertahankan aksen #17B8A6 pada path yang ingin diganti.

Tips

Animasi / event pada <svg>

const wrap = NX.Svg({ name: 'nexa', width: 160, height: 128 }); const svg = wrap.querySelector('svg'); svg.style.transition = 'transform 0.2s ease'; wrap.addEventListener('mouseenter', () => { svg.style.transform = 'scale(1.05)'; }); wrap.addEventListener('mouseleave', () => { svg.style.transform = 'scale(1)'; });

Responsif

width / height bisa string px atau persen; kombinasikan style: { maxWidth: '100%' } pada wrapper bila perlu.

Troubleshooting

Gejala Cek
NX.Svg undefined Skrip Nexa utama sudah di-load sebelum route/template jalan.
“SVG not found” console.log(Object.keys(NX.svgContent)) — pastikan name benar.
fill tidak mengubah warna SVG harus memakai literal #17B8A6 pada fill yang ingin diganti.
source error / not found Key belum terdaftar atau nilainya bukan string SVG penuh.

Impor modul langsung

import Svg, { svgContent, SvgComponent, assetsImage } from "/assets/modules/Svg/index.js"; const el = Svg({ name: "nexa", width: 100, height: 100 }); // assetsImage untuk register key custom (register di init)

Setelah nxdom.js, pakai NX.Svg dan NX.svgContent.

Lisensi

MIT — bagian dari kerangka Nexa / NX.

QR di canvas: NX.Qrcode.