Иконки на страницах, дашбордах и досках

Иконки на страницах, дашбордах и досках

Страница Plank не может ничего загрузить из интернета, когда её открывают: просмотрщик файлов и доски канваса не пускают CDN. Поэтому иконочный шрифт, <script> с иконками или <img src="https://…"> у читателя просто пустые. Иконки кладутся в сам файл — как встроенный SVG.

В каждом контейнере есть набор Lucide (≈2 100 иконок, лицензия ISC) и инструмент, который печатает любую из них готовой к вставке:

python3 /opt/plank/design/icon.py search invoice        # английские имена и теги
python3 /opt/plank/design/icon.py search счёт           # частые русские деловые слова тоже работают
python3 /opt/plank/design/icon.py svg receipt-text
python3 /opt/plank/design/icon.py svg triangle-alert --size 16 --label "Просрочено"
python3 /opt/plank/design/icon.py info                  # версия и количество

svg печатает одну строку:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="icon icon-receipt-text" aria-hidden="true">…</svg>

Она рисует цветом currentColor, то есть цветом окружающего текста, и сама следует светлой и тёмной теме. В ней нет id, скриптов и ссылок, поэтому копий на странице может быть сколько угодно. Lucide рисует и само приложение Plank, так что иконки страницы похожи на иконки приложения.

Параметры: --size (px, по умолчанию 20), --stroke (по умолчанию 1.75), --class (дополнительные классы), --label (см. ниже). На неизвестное имя инструмент предлагает ближайшие.

Когда иконка нужна

Иконка помогает, когда она быстрее слова или отмечает вид, который читатель увидит много раз:

• Статус — всегда со словом: circle-check Оплачено, triangle-alert Скоро срок, circle-x Просрочено. Цвет — из токенов статуса в Charts; именно иконка сохраняет статус для дальтоника и на чёрно-белой распечатке.
• Виды вещей в списке или на схеме: банк (landmark), документ (file-text), человек (user), склад (warehouse).
• Действия на кнопке, подпись которой тоже есть или общепонятна (search, x — закрыть, download).
• Знак плитки с показателем — один на плитку, одного размера во всех плитках.

Иконка не нужна как украшение рядом с заголовком, как маркер у каждого пункта списка и как единственная подпись элемента, смысл которого неочевиден.

Иконка — не иллюстрация. Иконка — маленький знак у подписи, примерно до 48 px. Картинка, которая несёт мысль слайда или страницы, — солнце с лучами, лист, клетка и её хлоропласт, процесс со стрелками, сам продукт, — это иллюстрация или схема: рисуйте её сами встроенным SVG, с заливками, несколькими цветами и подписями в рисунке. Это поощряется, и в школьной или питч-колоде их должно быть несколько. Lucide иллюстрацию не заменяет, и большая контурная иконка — не иллюстрация. Её цвета — арт-дирекция, а не серии графика: они свободны в пределах правил контраста.

Никогда не эмодзи вместо иконки. Эмодзи рисует операционная система читателя — на Windows, iPhone и Android это разные картинки, тему они не учитывают и выглядят как сообщение в чате, а не как документ.

Размер, линия и выравнивание

Один размер и одна толщина на роль по всей странице. Иконку и текст ставьте в flex-строку с align-items:center; gap:6px, а иконке давайте flex:none, чтобы длинная подпись её не сжала. На схеме вставляйте напечатанный <svg> как вложенный <svg x="…" y="…" width="24" height="24">.

Цвет берётся у окружающего текста (color: var(--ink-muted) у строки или токен статуса у плашки). Не задавайте fill — это контурные иконки, с заливкой они превращаются в кляксы.

С подписью или декоративная

Состояний два, как у любого SVG (Схемы, правило 2):

• Рядом со словом, которое говорит то же самое — по умолчанию, aria-hidden="true". Скринридер прочтёт слово один раз, а не дважды.
• Сама по себе — кнопка только с иконкой, иконка статуса в узкой колонке: --label "…". Инструмент напечатает role="img" aria-label="…". Кнопка <button> только с иконкой получает aria-label на самой кнопке и ещё title, чтобы его увидел пользователь мыши.

На доске канваса, в презентации

Доски канваса (*.canvas.html) принимают тот же встроенный SVG (Канвас). Колода .pptx рисует собственные фигуры и SVG не принимает; HTML-колода и слайд на доске — принимают.

Иконки никогда не считаются визуалом слайда. Слайд колоды с одними иконками — всё равно текстовый слайд, а колода из 6 и больше слайдов, где больше половины без визуала, не проходит проверку канваса (text-only-deck). Визуал — это график (chart.py), схема (diagram.py), нарисованная иллюстрация или фото; какой на каком слайде — /opt/plank/canvas/DECK.md.

Лицензия Lucide (ISC) — в /opt/plank/design/icons/lucide/LICENSE.