آیکون‌ها

اصول

1. جفت شده: آیکون‌ها باید همراه با متن باشند، زیرا به تنهایی اغلب واضح نیستند.
2. واضح: آیکون‌ها باید در اندازه‌های کوچک خوانا و بدون تزئین باشند. بگذارید متن کار اصلی را انجام دهد.
3. یکنواخت: از همان آیکون‌ها برای اقدامات مشابه در سراسر پرتو استفاده کنید. این باعث می‌شود اپلیکیشن استفاده آسان‌تری داشته باشد.

گالری آیکون‌ها

تمام آیکون‌های موجود در آبجکت Icons — روی هر آیکون کلیک کنید تا کد استفاده آن کپی شود.

دو روش استفاده

۱. آیکون‌های DS (توصیه‌شده برای آیکون‌های پرکاربرد)

DS یک آبجکت Icons export می‌کند که شامل آیکون‌های پرکاربرد Lucide و لوگوهای سفارشی است:

import { Icons } from '@parto-system-design/ui'

<Icons.search className="size-4" />
<Icons.settings className="size-4" />
<Icons.parto className="size-6" />

۲. Import مستقیم از Lucide (برای آیکون‌های خاص)

اگر به آیکونی نیاز دارید که در Icons نیست:

import { BarChart3, Zap, Activity } from 'lucide-react'
;<BarChart3 className="size-4" />

اندازه‌بندی

از سیستم size-* Tailwind استفاده کنید:

RTL

آیکون‌های جهت‌دار (فلش‌ها، شِورون‌ها) باید در RTL چرخانده شوند:

<Icons.arrowRight className="size-4 rtl:rotate-180" />
<Icons.chevronRight className="size-4 rtl:rotate-180" />

آیکون‌های غیرجهت‌دار (search, settings, home) نیاز به چرخش ندارند.

رنگ‌آمیزی

آیکون‌ها رنگ متن والد را ارث می‌برند. برای تنظیم مستقیم از کلاس‌های رنگ‌های متن استفاده کنید:

<Icons.check className="size-4 text-brand-default" />
<Icons.alertCircle className="size-4 text-destructive-default" />
<Icons.info className="size-4 text-foreground-muted" />

آیکون‌ها را با text-destructive برای اقدامات مخرب رنگ‌آمیزی نکنید. باید یک دیالوگ تأیید بلافاصله بعد از آن وجود داشته باشد که می‌تواند استایل مخرب را مدیریت کند.

آیکون‌های سفارشی

وقتی Lucide آیکون مورد نیاز شما را ندارد، آیکون‌های سفارشی ایجاد و استفاده کنید.

استفاده

import { Icons } from '@parto-system-design/ui'

<Icons.parto className="text-light" strokeWidth={1} size={16} />
<Icons.myCustomIcon size={24} className="text-foreground-muted" />

پیش‌فرض‌ها: همه آیکون‌ها به طور پیش‌فرض strokeWidth={2} و size={24} دارند. این ویژگی‌ها را در صورت نیاز override کنید.

افزودن آیکون‌های سفارشی جدید

1. ایجاد فایل SVG: فایل SVG خود را به packages/ui/src/icons/ با نام kebab-case اضافه کنید (مثلاً my-new-icon.svg). الزامات:

   • در اندازه 24x24px با viewBox="0 0 24 24" export شده باشد
   • از stroke="currentColor" برای stroke ها استفاده کند (بدون رنگ‌های hardcoded)
   • از fill="none" برای fill ها استفاده کند
   • محتوای آیکون حدود 18x18px درون فریم 24x24 باشد
   • عناصر غیرضروری (<clipPath>، <defs>، wrapper های <g>) حذف شده باشند
   • ساختار SVG تا حد امکان ساده باشد و فقط شامل عناصر <path> باشد

2. استفاده: آیکون را از Icons object import کنید:

   import { Icons } from '@parto-system-design/ui'
   ;<Icons.myNewIcon size={16} strokeWidth={1} />

مثال SVG

<!-- ❌ بد — رنگ‌های hardcoded و ساختار پیچیده -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
  <rect width="24" height="24" fill="#1E1E1E" />
  <path d="M..." fill="#404040" />
</svg>

<!-- ✅ خوب — currentColor و ساختار تمیز -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 7C6 4.2 8.2 2 11 2H13C15.8 2 18 4.2 18 7" />
</svg>

عیب‌یابی

اگر SVG شما ویژگی‌های stroke-width را مشخص کند، آن‌ها ویژگی strokeWidth کامپوننت را override می‌کنند. ویژگی‌های stroke را از path های فردی حذف کنید تا کامپوننت آن‌ها را کنترل کند.