PartoLogo

معرفی

PartoLogo نشان و لوگوتایپ پرتو را به‌صورت SVG درون‌خطی رندر می‌کند. هیچ فایلی در public/ لازم نیست و هیچ درخواست شبکه‌ای اضافه نمی‌شود.

چه زمانی استفاده کنیم

• در هدر یا پوستهٔ برنامه، جایی که برند باید حاضر باشد
• در صفحهٔ ورود، خطا، یا هر صفحهٔ مستقل بدون ناوبری
• وقتی نام محصول باید کنار برند بیاید (productName)

چه زمانی استفاده نکنیم

• برای favicon یا تصویر اشتراک‌گذاری اجتماعی — آن‌ها فایل واقعی می‌خواهند، نه کامپوننت
• روی سطح رنگی برند؛ نشان همیشه سبز است و در پس‌زمینهٔ سبز گم می‌شود (پایین را ببینید)
• به‌عنوان آیکون عمومی؛ برای آن Icons هست

استفاده

import { PartoLogo } from '@partodata/ui'

export function AppHeader() {
  return <PartoLogo variant="combined" size={28} />
}

حالت‌ها و انواع

سه واریانت

• combined (پیش‌فرض) — نشان و لوگوتایپ کنار هم. نشان کمی بزرگ‌تر رندر می‌شود (size × ۱.۰۵) تا از نظر بصری با ارتفاع حروف هم‌وزن شود.
• logotype — فقط واژه‌نشان «پرتو»، برای جایی که نشان جداگانه در همان نما هست.
• icon — فقط نشان، برای فضای تنگ مثل نوار ناوبری جمع‌شده.

اندازه

size ارتفاع است، نه عرض؛ عرض برای حفظ نسبت خودکار محاسبه می‌شود. پیش‌فرض ۲۸.

نام محصول

<PartoLogo productName="پایش" />

فقط با واریانت combined معنا دارد و یک جداکنندهٔ عمودی به‌همراه نام اضافه می‌کند.

راهنمای استفاده

Props

بقیهٔ propهای React.HTMLAttributes<HTMLSpanElement> روی <span> ریشه پخش می‌شوند و ref هم به همان می‌رسد.

دسترسی‌پذیری

• نشان role="img" با aria-label="Parto" دارد و واژه‌نشان aria-label="پرتو" — پس صفحه‌خوان در هر واریانت نام برند را می‌خواند.
• جداکنندهٔ کنار productName با aria-hidden="true" از صفحه‌خوان پنهان است؛ فقط خودِ نام خوانده می‌شود.
• در هدری که لوگو به خانه لینک می‌شود، لینک را برچسب‌گذاری کنید (aria-label="خانه")؛ خودِ لوگو مقصد را نمی‌رساند.

کامپوننت‌های مرتبط

• برندبوک — قواعد استفاده از برند، فضای امن و گالری اشتباه‌ها؛ اگر دربارهٔ کاربرد برند تصمیم می‌گیرید نه دربارهٔ کد، آن‌جا شروع کنید
• AppShell — اگر پوستهٔ کامل می‌سازید، لوگو را به اسلات brand آن بدهید نه اینکه دستی جای‌گذاری کنید
• Icons — برای آیکون‌های رابط؛ لوگو آیکون نیست