rastrillo 设计系统

设计系统所提供内容的总览。主题：day。语言：简体中文。

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 自己的

其中 5 个（共 12 个）与 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))