آیکون‌ها

آیکون بخشی از زبان طراحی (TDL) است: مصرف‌کننده معنا را می‌خواهد، نه فایل را. شکل بصری پشت نام معنایی عوض‌شدنی است بدون اینکه کدی در محصول‌ها تغییر کند.

از ساده‌ترین استفاده تا افزودن آیکون جدید به registry.

۱. نمایش آیکون — همیشه با نام معنایی:

import { Icon } from '@tokapps/icons';<Icon name="notification" />                         // decorative<Icon name="notification" label="Notifications" />          // meaningful (role="img")<Icon name="notification" size="lg" />               // sm | md | lg | inherit | auto<Icon name="status.loading" animate="spin" />        // animated

۲. داخل دکمه — دکمهٔ فقط‌آیکون حتماً aria-labelکپی کد دارد:

<Button variant="ghost" aria-label="Search" icon={<Icon name="search" />} /><Button icon={<Icon name="add" size="sm" />}>Submit idea</Button>

۳. جهت‌دار در RTL — mirrorکپی کد فقط برای آیکون‌هایی که معنای جهتی دارند:

<Icon name="back" mirror />

۴. جابه‌جایی دو حالت — IconSwapکپی کد نام معنایی می‌گیرد:

<IconSwap from="theme.dark" to="theme.light" active={isLight} />

۵. از داده یا نقشه — وقتی JSX مستقیم ندارید (آرایه، نقشه، پراپ)، iconByNameکپی کد کامپوننت را می‌دهد؛ نوع IconNameکپی کد نام نامعتبر را قبل از اجرا رد می‌کند:

import { iconByName, type IconName } from '@tokapps/icons';const sections: { name: IconName; label: string }[] = [  { name: 'product.ideation', label: 'Ideas' },  { name: 'product.funding', label: 'Funding' },];const Glyph = iconByName(sections[0].name);<Glyph width={20} height={20} aria-hidden />

۶. اندازهٔ میزبان — جایی که والد اندازه را می‌دهد (مثل آیتم Dock یا کلاس Tailwind) از size="auto"کپی کد استفاده کنید تا قاعدهٔ اندازهٔ Icon دخالت نکند:

<DockItem icon={<Icon name="home" size="auto" />} label="Home" />

۷. افزودن آیکون تازه — پیش از افزودن، فهرست بالا را بگردید (هر مفهوم یک آیکون). اگر نبود:

1. در بخش «همه آیکون‌های Lucide» نام export را پیدا کنید (مثلاً Giftکپی کد).
2. یک خط به packages/icons/src/registry.tsکپی کد اضافه کنید: { name: 'reward', source: 'Gift', fa: 'پاداش', category: 'product', keywords: 'gift' }کپی کد — نام معنایی بسازید، نه نام Lucide.
3. فقط اگر خود یکی از کامپوننت‌های TUK آن را رندر می‌کند: core: trueکپی کد بگذارید و کلید را در core.tsکپی کد هم بیاورید. در غیر این صورت چیزی لازم نیست؛ خودکار تنبل است.
4. pnpm --filter @tokapps/icons testکپی کد را بزنید: یکتایی نام‌ها، هماهنگی core و قابل‌بارگذاری‌بودن منبع بررسی می‌شود.

// packages/icons/src/registry.ts{ name: 'reward', source: 'Gift', fa: 'reward', category: 'product', keywords: 'gift prize' },

این‌ها در بازبینی و در check:tokens اجرا می‌شوند.

۱۱۴ آیکون رسمی TDS — هر مفهوم دقیقاً یک آیکون دارد. منبع بصری: Lucide (مجوز ISC) پشت نام معنایی. روی هر آیکون بزنید تا کد استفاده‌اش کپی شود. نشان جهت‌دارها با mirror در RTL برمی‌گردد.

اگر مفهومی در مجموعه کیت نبود، از کل Lucide انتخاب و با یک نام معنایی به registry.ts اضافه کنید (آموزش گام ۷ بالا) تا همه محصولات همان را استفاده کنند.

آیکون را مستقیم رندر نکنید؛ Icon اندازه و ضخامت را از توکن می‌گیرد و رنگ را از متن اطراف (currentColor).

برای چیزی که در Lucide نیست (نشان محصول، مفهوم خاص توکاپس) با createIcon بسازید. خروجی همان قرارداد Lucide را دارد، پس در Icon، Dock و Button مثل بقیه کار می‌کند و انیمیشن هم می‌گیرد.

حرکت روی همان SVG با CSS انجام می‌شود؛ فایل Lottie یا کتابخانه جدا لازم نیست. با «کاهش حرکت» همه ثابت می‌شوند، پس معنا هرگز فقط در حرکت نیست.

<Icon name="status.loading" animate="spin" />                       // پیوسته
<Icon name="notification" animate="wiggle" trigger="hover" />      // با hover/فوکوس دکمه یا لینک والد
<IconSwap from={Moon} to={Sun} active={isDark} />          // تغییر وضعیت
<Button loading>ذخیره</Button>                             // دکمه خودش آیکون چرخان می‌گذارد

رنگ تنها نشانه وضعیت نیست؛ هر وضعیت آیکون و برچسب متنی دارد. دکمه آیکونی حداقل به اندازه هدف لمسی است و aria-label دارد.

هدف لمسی 44pxکپی کد