rastrillo デザインシステム

デザインシステムが提供するものの概要。テーマ: plain。言語: 日本語。

12 個の slug。インライン SVG として同梱され、バイナリにコンパイルされています。ビルド手順もなく、第二のオリジンもなく、ネットワークがなくても動きます。大きさは tokens.css 自身の .icon ルールが隣の文字から決めていて、いまここで見えているのがその大きさです。誰も答えない slug は何も描かないので、打ち間違いの代償はアイコンが 1 つ欠けることであって、応答の途中で死んだページではありません。

• 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 のセットでさえ、自分用の対応表を持っています。アイコンの下の最後の行がその名前を繰り返していなければ、それがその 1 つです。見返りは、アプリがどのセットを足場に選んでも同じ呼び出しが同じ字形を指し、同梱の 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))