Icon System — MyHoreca Pay

Единственная библиотека

@tabler/icons-react

Не смешивать с Lucide / FontAwesome / Material / emoji. POS-репозиторий использует Lucide — не переносить.

Imports

Разрешено:

• frontend/src/shared/ui/** — прямые Tabler imports внутри registry и shared components.

Запрещено (ESLint no-restricted-imports):

• pages / feature components / routes — прямой @tabler/icons-react.

Canonical:

import { actionIcons, domainIcons, statusIcons, navIconMap, iconSizes, iconStroke } from '@/shared/ui';

Размеры

Role	Size
inline	16
control	18
toolbar	20
pageAction	22
emptyState	32

Stroke: iconStroke (1.8). Color: currentColor / наследование от компонента.

Action mapping (actionIcons)

Key	Meaning
search, filter, add, edit, save, delete	CRUD / find
cancel, close, undo	Abort / dismiss
retry, refresh	Reload / retry
upload, download, send	Transfer
view, openDetails, externalLink	Navigate
moreActions, history, copy	Secondary
notify, expand, collapse	Chrome
check, checks, alert, clock, receipt, listCheck, cloudUpload, userQuestion, diff	Workbench / queue

Domain mapping (domainIcons + navIconMap)

Dashboard, review queue, workbench, bank statements, import, recognition, matching, counterparties, Syrve documents, allocations, posting, reconciliation, audit, settings, organizations, users, connections, workers, bank account.

Navigation keys совпадают с i18n layout.nav.*.

Status mapping (statusIcons)

success, warning, error, info, pending, locked, permissionDenied, neutral, help.

Accessibility

• Icon-only: обязательно tooltip + aria-label (IconButtonWithTooltip).
• Иконка не заменяет текст финансовых действий.
• Не использовать цветную декоративную иконку без семантики.

Добавление иконки

1. Определить semantic key (action / domain / status).
2. Добавить в соответствующий registry file.
3. Экспортировать через icons/index.ts / barrel.
4. Не импортировать Tabler в page.
5. Обновить эту таблицу.

Запрещённые паттерны

• Случайный выбор похожей иконки для той же операции на другой странице.
• Разный stroke width в соседних controls.
• Filled + outline mix без причины.
• Emoji как runtime icon.