rastrillo 設計系統

設計系統提供嘅嘢嘅概覽。主題：signal。語言：廣東話。

12 個 slug，以內嵌 SVG 隨源碼編譯入二進位檔：冇建置步驟，冇第二個來源，完全冇網絡都用得。每個嘅大細都由 tokens.css 自己嘅 .icon 規則按旁邊嘅文字決定，即係你而家見到嗰個大細。冇人答嘅 slug 咩都唔會畫，所以打錯字嘅代價係少咗一個圖示，唔係一版喺回應中途死咗嘅頁。

• alert-triangle{{icon "alert-triangle"}}lucide.dev/icons/triangle-alert
• check{{icon "check"}}lucide.dev/icons/check
• check-circle{{icon "check-circle"}}lucide.dev/icons/circle-check
• chevron-down{{icon "chevron-down"}}lucide.dev/icons/chevron-down
• help-circle{{icon "help-circle"}}lucide.dev/icons/circle-help
• info{{icon "info"}}lucide.dev/icons/info
• kebab{{icon "kebab"}}lucide.dev/icons/ellipsis-vertical
• menu{{icon "menu"}}lucide.dev/icons/menu
• plus{{icon "plus"}}lucide.dev/icons/plus
• search{{icon "search"}}lucide.dev/icons/search
• x{{icon "x"}}lucide.dev/icons/x
• x-circle{{icon "x-circle"}}lucide.dev/icons/circle-x

呢啲名係 rastrillo 自己嘅

12 個之中有 5 個同 lucide.dev 公佈嘅名唔同，所以連 Lucide 呢套本身都帶住自己一份對照。凡係圖示下面最後一行冇重複佢個名嘅，就係其中之一。好處係：無論應用搭骨架揀邊套，同一個調用都係指同一個字形，而隨附嘅 partial 唔會因為換套而改。

kebab 同 menu 係最值得分清嘅一對：kebab 係嗰三點，意思係「呢一行仲有其他操作」；menu 係嗰三條線，意思係導覽。外殼收埋嗰陣用嘅係 menu。

啲字形由邊度嚟

Lucide，按 ISC 授權隨源碼提供，釘死喺原始碼度而唔係執行時先去攞。rastrillo new --icons=font-awesome 就會改為搭出 Font Awesome Free：嗰個係應用可以攞料嘅來源，唔係呢個框架嘅依賴。呢度冇任何嘢會去攞佢，而 Pro 係付費產品，rastrillo 冇辦法代你隨源碼提供。

成套嘢喺 lucide.dev (喺新分頁度打開)。

框架冇提供嘅圖示

rastrillo new 寫出嘅 icons 套件係屬於應用嘅原始碼：將字形加落去，再好似其他圖示咁調用。ui.WithIcons 就係將你自己嗰套擺喺框架嗰套前面嘅接縫。

tmpl := template.Must(template.New("").
	Funcs(ui.Funcs(ui.WithIcons(icons.Icon, icons.Assets))).
	ParseFS(ui.Templates(), "*.html"))

呢個陷阱係靜英英嘅：ui.FuncsWith 會將 icon 同 iconAssets 綁返去內置嗰套。搭骨架生成咗自己圖示嘅應用，必須喺每次調用都傳埋兩個接縫，否則佢啲圖示會喺每個請求上面靜靜雞退返去 Lucide——而且睇落完全合理。

ui.Funcs(ui.WithT(t), ui.WithIcons(icons.Icon, icons.Assets))