پرتوپرتو

لوگو و هویت بصری

راهنمای استفاده از لوگو پرتو

لوگو پرتو

لوگوی پرتو نماد هویت بصری سیستم طراحی ماست.

انواع لوگو

لوگوی معمولی (Icon)

فقط آیکون/نماد بدون متن. مناسب برای Favicon، آیکون اپلیکیشن و فضاهای کوچک.

لوگوی پرتو

لوگوتایپ (Logotype)

فقط متن/نام برند بدون آیکون. مناسب برای هدر صفحات و فضاهای افقی.

تم روشن

لوگوتایپ پرتو - تم روشن

تم تاریک

لوگوتایپ پرتو - تم تاریک

ترکیبی (Combined)

آیکون و متن کنار هم. مناسب برای صفحه اصلی و هدر اصلی.

تم روشن

لوگوی کامل پرتو - تم روشن

تم تاریک

لوگوی کامل پرتو - تم تاریک

اندازه‌های مختلف

کوچک (32px):
لوگوی کوچک
متوسط (64px):
لوگوی متوسط
بزرگ (120px):
لوگوی بزرگ

استفاده در کد

استفاده از فایل‌های لوگو

import Image from 'next/image';
import { useTheme } from 'next-themes';

// لوگوی معمولی (سازگار با هر دو تم)
<Image src="/logos/icon/logo.svg" alt="پرتو" width={40} height={40} />

// لوگوتایپ با پشتیبانی از تم تاریک/روشن
function Logotype() {
  const { theme } = useTheme();
  const logotypeSrc = theme === 'dark' 
    ? '/logos/logotype/logotype-dark.svg' 
    : '/logos/logotype/logotype-light.svg';
  
  return <Image src={logotypeSrc} alt="پرتو" width={120} height={40} />;
}

// ترکیبی با پشتیبانی از تم تاریک/روشن
function CombinedLogo() {
  const { theme } = useTheme();
  const combinedSrc = theme === 'dark' 
    ? '/logos/combined/combined-dark.svg' 
    : '/logos/combined/combined-light.svg';
  
  return <Image src={combinedSrc} alt="پرتو" width={160} height={40} />;
}

استفاده ساده (بدون تغییر خودکار تم)

import Image from 'next/image';

// لوگوتایپ تم روشن
<Image src="/logos/logotype/logotype-light.svg" alt="پرتو" width={120} height={40} />

// لوگوتایپ تم تاریک
<Image src="/logos/logotype/logotype-dark.svg" alt="پرتو" width={120} height={40} />

// ترکیبی تم روشن
<Image src="/logos/combined/combined-light.svg" alt="پرتو" width={160} height={40} />

// ترکیبی تم تاریک
<Image src="/logos/combined/combined-dark.svg" alt="پرتو" width={160} height={40} />

استفاده از کامپوننت Icon از پکیج UI

import { Icons } from '@parto/ui';

export default function MyComponent() {
  // استفاده از آیکون SVG (برای استفاده در پکیج UI)
  return <Icons.parto className="w-12 h-12" />;
}

نکته: در پروژه‌های Next.js، بهتر است از فایل‌های لوگو در public استفاده کنید تا بهینه‌تر باشد.

مسیر فایل‌ها

تمام فایل‌های لوگو در پوشه public/logos/ قرار دارند:

لوگوی معمولی (Icon)

  • /logos/icon/logo.svg - نسخه SVG
  • /logos/icon/logo.png - نسخه PNG

لوگوتایپ (Logotype)

  • /logos/logotype/logotype-light.svg - تم روشن (SVG)
  • /logos/logotype/logotype-light.png - تم روشن (PNG)
  • /logos/logotype/logotype-dark.svg - تم تاریک (SVG)
  • /logos/logotype/logotype-dark.png - تم تاریک (PNG)

ترکیبی (Combined)

  • /logos/combined/combined-light.svg - تم روشن (SVG)
  • /logos/combined/combined-light.png - تم روشن (PNG)
  • /logos/combined/combined-dark.svg - تم تاریک (SVG)
  • /logos/combined/combined-dark.png - تم تاریک (PNG)

نکات مهم

  • لوگوی معمولی: به صورت خودکار با تم فعلی سازگار است و نیازی به نسخه‌های جداگانه ندارد
  • لوگوتایپ و ترکیبی: برای بهترین نتیجه، از نسخه‌های تم روشن/تاریک استفاده کنید
  • فرمت SVG: برای استفاده در وب توصیه می‌شود (مقیاس‌پذیر و سبک)
  • فرمت PNG: برای استفاده در موارد خاص یا زمانی که SVG پشتیبانی نمی‌شود