From 831a5b3615e55eaaccc957f9c5b25328517660be Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@local>
Date: Wed, 9 Sep 2026 15:41:11 +0200
Subject: [PATCH] =?UTF-8?q?docs:=20add=20gotcha=20=E2=80=94=20icon=20butto?=
 =?UTF-8?q?n=20sizing=20(use=20native=20filled=20icon,=20not=20inline=20SV?=
 =?UTF-8?q?G)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 KNOWLEDGE.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/KNOWLEDGE.md b/KNOWLEDGE.md
index 45400c5..d346637 100644
--- a/KNOWLEDGE.md
+++ b/KNOWLEDGE.md
@@ -23,6 +23,16 @@
 - **Решение:** для приглушённого текста брать компонент `<Muted>` из `@create-figma-plugin/ui`, а не проп `muted` у `<Text>`.
 - **Ссылка:** src/ui.tsx
 
+### Кнопка-иконка рядом с другими IconButton — бери РОДНУЮ иконку, не инлайн-SVG
+- **Симптом:** иконка копирования рядом с кнопкой развернуть выглядит «другого размера»/тоньше, хотя `viewBox` один (`24×24`).
+- **Причина:** `IconButton` из `@create-figma-plugin/ui` оборачивает иконку в `<div class="icon">` (`position:absolute`, БЕЗ задания размера) — размер берётся целиком из самой SVG. Родные иконки сета (`IconExpand24`, `IconCheck24`, `IconCopySmall24` и т.п.) — **залитые** (`fill="currentColor"`). Моя инлайн-SVG была **контурной** (`stroke`, `fill="none"`, `stroke-width=2`) — на том же `24×24` viewBox контурные lucide-иконки визуально кажутся меньше и легче, чем залитые соседки. Отсюда ощущение «разные размеры».
+- **Правило (как делать правильно):**
+  1. Рядом с `IconButton` НИКОГДА не ставить текстовую `<Button>` с лейблом — только `IconButton` (пользователь прямо сказал: *"Очевидно же, что там достаточно кнопки иконки"*).
+  2. Брать иконку из родного сета `@create-figma-plugin/ui` (он же — адаптация lucide, залитые 24px): `IconCopySmall24`, `IconDuplicateSmall24`, `IconClipboardSmall24`, `IconCheck24`, `IconExpand24` и т.д. — гарантированно совпадёт по габариту и весу с соседями.
+  3. Если нужной иконки в сете нет (напр. copy/clipboard там только 16px `-small`), и ты делаешь инлайн-SVG — делай её **залитой** (`fill="currentColor"`, без `stroke`), `width/height=24`, `viewBox="0 0 24 24`, чтобы вес совпал с родными. Контурные (`stroke`) иконки lucide рядом с залитыми соседями НЕ класть.
+  4. Подтверждение действия (копирование) — переключать иконку на `IconCheck24` на ~1.2 с, без текстовой подписи.
+- **Ссылка:** node_modules/@create-figma-plugin/ui/lib/components/icon-button/icon-button.module.css (`.icon` без размера), icon-24/icon-*-24.js (залитые SVG), src/ui.tsx (кнопки в тулбаре).
+
 ### Плагин не запускается в Figma — нет папки `build/` на Matebook
 - **Симптом:** плагин не открывается / Figma молча ничего не делает при Run (ошибка не всегда видна).
 - **Причина:** `manifest.json` указывает `main: build/main.js` и `ui: build/ui.js`, но в скопированной на Matebook папке папки `build/` нет (старая команда синхронизации исключала её через `--exclude build`).