Icon

Type: "icon". Render satu icon dari library Lucide. Polos, di dalam frame, atau dengan background bulat/kotak.

Props

Field	Type	Required	Default	Keterangan
icon	string (Lucide name, max 50)	✓	"Star"	Nama PascalCase, mis. "Heart", "Check", "Zap"
view	'default'|'stacked'|'framed'	✓	"default"	Mode tampilan
shape	'square'|'rounded'|'circle'	✓	"circle"	Bentuk frame (untuk view ≠ default)
alignment	'left'|'center'|'right'	✓	"center"	Posisi
link	string (URL)	✓	""	Kalau diisi, icon jadi link
linkTarget	'_self'|'_blank'	✓	"_self"	Target link
primaryColor	string (hex/CSS, max 50)	✓	""	Warna icon (kosong = ikut theme)
secondaryColor	string (hex/CSS, max 50)	✓	""	Warna background (untuk stacked/framed)
size	number (6-300)	✓	48	Ukuran icon dalam px
rotate	number (-360 to 360)	✓	0	Rotasi derajat
borderWidth	number (0-20)	✓	2	Lebar border (view = framed)
borderRadius	number (0-200)	✓	0	Radius border kalau shape="rounded"
padding	number (0-100)	✓	16	Inner padding (view ≠ default)

View modes

• default: icon polos (no background, no border). Pakai primaryColor + size.
• stacked: icon dengan background warna (secondaryColor) berbentuk shape. Cocok untuk feature card.
• framed: icon dengan border outline. Pakai borderWidth, opsional secondaryColor untuk fill.

Contoh: icon polos

{
  "id": "ic001abcd",
  "type": "icon",
  "props": {
    "icon": "Heart",
    "view": "default",
    "shape": "circle",
    "alignment": "center",
    "link": "",
    "linkTarget": "_self",
    "primaryColor": "#dc2626",
    "secondaryColor": "",
    "size": 64,
    "rotate": 0,
    "borderWidth": 2,
    "borderRadius": 0,
    "padding": 16
  }
}

Contoh: icon stacked (feature card style)

{
  "id": "ic002efgh",
  "type": "icon",
  "props": {
    "icon": "Zap",
    "view": "stacked",
    "shape": "circle",
    "alignment": "center",
    "link": "",
    "linkTarget": "_self",
    "primaryColor": "#ffffff",
    "secondaryColor": "#3b82f6",
    "size": 32,
    "rotate": 0,
    "borderWidth": 2,
    "borderRadius": 0,
    "padding": 16
  }
}

Contoh: icon link sosmed

{
  "id": "ic003ijkl",
  "type": "icon",
  "props": {
    "icon": "Instagram",
    "view": "default",
    "shape": "circle",
    "alignment": "left",
    "link": "https://instagram.com/yourhandle",
    "linkTarget": "_blank",
    "primaryColor": "#e4405f",
    "secondaryColor": "",
    "size": 24,
    "rotate": 0,
    "borderWidth": 2,
    "borderRadius": 0,
    "padding": 16
  }
}

Tips

• Nama icon WAJIB PascalCase persis dari lucide.dev/icons (mis. ArrowRight, bukan arrow-right)
• Untuk konsistensi tema, kosongkan primaryColor — icon akan ikut warna theme site
• Untuk social media row, pakai beberapa icon di dalam block dengan flex-direction: row
• Karena semua field icon required, hand-craft JSON harus include semua 13 field props meskipun sebagian default