дизайн-система rastrillo

Обзор всего, что даёт дизайн-система. Тема: day. Язык: Русский.

12 slug'ов, поставленных как встроенный SVG и вкомпилированных в бинарник: ни шага сборки, ни второго источника, и работают вовсе без сети. Размер каждого берётся от текста рядом по собственному правилу .icon в tokens.css — это тот размер, который вы видите здесь. 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 (откроется в новой вкладке).

Иконка, которой нет во фреймворке

Пакет icons, который пишет rastrillo new, — это исходники, принадлежащие приложению: добавьте глиф туда и вызывайте как любой другой. 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))