آیکون‌ها

اصول

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

رنگ‌آمیزی

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

<Plus className="text-foreground-muted" />

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

آیکون‌های UI

ما برای هر نیاز استاندارد UI به Lucide اعتماد می‌کنیم.

استفاده از Lucide

import { Plus, Trash2, Edit } from 'lucide-react'

function App() {
  return (
    <>
      <Plus className="text-foreground-muted" strokeWidth={1} size={16} />
      <Trash2 className="text-destructive" strokeWidth={2} size={24} />
      <Edit className="text-brand" strokeWidth={2} size={24} />
    </>
  )
}

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

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

استفاده

import { PartoLogo, CustomIcon } from '@parto/ui/icons'

function App() {
  return (
    <>
      <PartoLogo className="text-light" strokeWidth={1} size={16} />
      <CustomIcon 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 ها استفاده می‌کند (بدون رنگ‌های hardcoded)
   • محتوای آیکون به صورت نوری در مرکز و حدود 18x18px درون فریم 24x24 قرار دارد
   • هر عنصر غیرضروری مانند <clipPath>، <defs>، و wrapper های <g> حذف شده است
   • ساختار SVG تا حد امکان ساده است و فقط شامل عناصر <path> است

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

   import { MyNewIcon } from '@parto/ui/icons'
   ;<MyNewIcon size={16} strokeWidth={1} />

دستورالعمل‌های طراحی SVG

آیکون‌ها باید:

• همیشه در اندازه 24x24px export شوند
• یک آیکون درون آن فریم داشته باشند که حدود 18x18px است
• از path های تمیز و ساده بدون عناصر wrapper غیرضروری استفاده کنند

مثال بد ❌

توجه کنید به رنگ‌های hardcoded، پس‌زمینه‌های غیرضروری، و ساختار پیچیده:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="24" height="24" fill="#1E1E1E" /> <!-- ❌ رنگ hardcoded -->
  <path d="M..." fill="#404040" /> <!-- ❌ رنگ hardcoded -->
  <path d="M..." stroke="#EDEDED" stroke-linecap="round" /> <!-- ❌ رنگ hardcoded -->
</svg>

مثال خوب ✅

ساختار تمیز با currentColor و ویژگی‌های مناسب:

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" 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" />
  <path d="M4.5 11H19.5" />
  <path d="M6 11L6.8 20C6.9 21.1 7.9 22 9 22H12" />
</svg>

عیب‌یابی

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