本文へ移動
セクション
言語、現在は日本語
Rastrillo デザインシステム

アイコン

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
  • 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 パッケージはアプリ所有のソースです。字形をそこに足して、ほかと同じように呼べば済みます。その Icon と Assets を icon と iconAssets として ui.Pages に渡せば、あなたのセットがフレームワーク自身のセットより前に立ちます。

Funcs: template.FuncMap{"icon": icons.Icon, "iconAssets": icons.Assets, "asset": assets.Path},

両方を常に渡してください。icon だけだと iconAssets はフレームワークの既定値のままになり、cdn や js 配信がエラーも出さずに壊れます。