# अपने ऐप में किसी कंपनी का लोगो ड्रॉप करें — कॉपी-पेस्ट रेसिपी

> सामान्य आकार के लिए व्यावहारिक स्निपेट: एक `<img>` टैग, एक React घटक, एक Next.js Image, एक Tailwind अवतार स्लॉट, एक गहरी-मोड-जागरूक `<picture>` तत्व, एक OG छवि फॉलबैक, और एक सर्वर-हस्ताक्षरित URL। हर स्निपेट सार्वजनिक `https://api.clearlogo.dev` एंडपॉइंट के विरुद्ध काम करता है।
>
> सभी उदाहरण मानते हैं कि आपके पास एक ब्राउज़र कुंजी (ग्राहक कोड के लिए) या एक सर्वर कुंजी (बैकएंड कोड के लिए) है। [डैशबोर्ड से एक कुंजी बनाएं](https://clearlogo.dev/login?lang=hi)।

## 1. सादा HTML

सबसे तेजी से संभव एकीकरण — URL को `<img>` टैग में पेस्ट करें।

```html
<img
  src="https://api.clearlogo.dev/logo/github.com?size=64&content=80&token=YOUR_BROWSER_KEY"
  alt="GitHub"
  width="64"
  height="64"
/>
```

`size` को प्रस्तुत आयाम के साथ मिलाएं ताकि ब्राउज़र बैंडविड्थ बर्बाद न करे।

## 2. React घटक

एक छोटा पुनः उपयोग योग्य घटक अधिकांश उत्पाद UI आवश्यकताओं को कवर करता है।

```tsx
type CompanyLogoProps = {
  domain: string;
  size?: 32 | 48 | 64 | 96 | 128;
  alt?: string;
};

const BROWSER_KEY = process.env.NEXT_PUBLIC_CLEARLOGO_KEY!;

export function CompanyLogo({ domain, size = 64, alt }: CompanyLogoProps) {
  return (
    <img
      src={`https://api.clearlogo.dev/logo/${domain}?size=${size}&content=80&token=${BROWSER_KEY}`}
      alt={alt ?? `${domain} logo`}
      width={size}
      height={size}
      loading="lazy"
      decoding="async"
    />
  );
}
```

`loading="lazy"` और `decoding="async"` लंबी सूचियों को पेंट को ब्लॉक करने से रोकते हैं।

## 3. Next.js `<Image>`

API होस्ट को `next.config.js` में एक बार जोड़ें, फिर हर जगह अनुकूलित `<Image>` घटक का उपयोग करें।

```js
// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "api.clearlogo.dev" },
    ],
  },
};
```

```tsx
import Image from "next/image";

export function CompanyLogo({ domain, size = 64 }: { domain: string; size?: number }) {
  return (
    <Image
      src={`https://api.clearlogo.dev/logo/${domain}?size=${size * 2}&content=80&token=${process.env.NEXT_PUBLIC_CLEARLOGO_KEY}`}
      alt={`${domain} logo`}
      width={size}
      height={size}
      unoptimized
    />
  );
}
```

HiDPI डिस्प्ले पर रेटिना तीक्ष्णता के लिए `size * 2` अनुरोध करें। यदि आप चाहते हैं कि API से WebP वार्ता ग्राहक के माध्यम से बहे तो `unoptimized` का उपयोग करें।

## 4. Tailwind अवतार स्लॉट

लोगो को एक निश्चित UI स्लॉट में ड्रॉप करें जो ब्रांड में दृश्य रूप से सुसंगत रहता है।

```tsx
<div className="flex items-center gap-3">
  <div className="h-10 w-10 overflow-hidden rounded-md bg-neutral-100 ring-1 ring-neutral-200">
    <img
      src={`https://api.clearlogo.dev/logo/${domain}?size=64&content=80&token=${BROWSER_KEY}`}
      alt=""
      className="h-full w-full object-contain"
    />
  </div>
  <div>
    <div className="font-medium">{name}</div>
    <div className="text-sm text-neutral-500">{domain}</div>
  </div>
</div>
```

`object-contain` प्लस एक निश्चित स्लॉट आकार तालिकाओं और सूचियों के लिए सबसे विश्वसनीय आकार है। `content=80` पैरामीटर के साथ जोड़ी करें।

## 5. गहरी-मोड-जागरूक लोगो

`<picture>` का उपयोग करें एक `prefers-color-scheme` स्रोत के साथ ताकि ब्राउज़र पेंट समय पर गहरी संस्करण को स्वैप करे।

```html
<picture>
  <source
    srcset="https://api.clearlogo.dev/logo/github.com?size=64&theme=dark&token=YOUR_BROWSER_KEY"
    media="(prefers-color-scheme: dark)"
  />
  <img
    src="https://api.clearlogo.dev/logo/github.com?size=64&theme=light&token=YOUR_BROWSER_KEY"
    alt="GitHub"
    width="64"
    height="64"
  />
</picture>
```

React घटक के रूप में लपेटा:

```tsx
export function CompanyLogo({ domain, size = 64 }: { domain: string; size?: number }) {
  const base = `https://api.clearlogo.dev/logo/${domain}?size=${size}&content=80&token=${BROWSER_KEY}`;
  return (
    <picture>
      <source srcSet={`${base}&theme=dark`} media="(prefers-color-scheme: dark)" />
      <img src={`${base}&theme=light`} alt={`${domain} logo`} width={size} height={size} />
    </picture>
  );
}
```

API हल्के संस्करण को फॉलबैक करता है जब गहरी संस्करण मौजूद नहीं होता है।

## 6. प्लेसहोल्डर के साथ सूची रेंडरिंग

लंबी सूचियों के लिए, तुरंत एक placeholder रेंडर करें।

```tsx
function LogoCell({ domain }: { domain: string }) {
  const [loaded, setLoaded] = useState(false);
  return (
    <div className="relative h-10 w-10 rounded-md bg-neutral-100">
      <img
        src={`https://api.clearlogo.dev/logo/${domain}?size=64&content=80&token=${BROWSER_KEY}`}
        alt=""
        loading="lazy"
        onLoad={() => setLoaded(true)}
        className={`h-full w-full object-contain transition-opacity ${
          loaded ? "opacity-100" : "opacity-0"
        }`}
      />
    </div>
  );
}
```

## 7. पहले अक्षर के साथ त्रुटि फॉलबैक

यदि API किसी डोमेन के लिए लोगो नहीं पा सकता है, तो एक deterministic अक्षर avatar रेंडर करें।

```tsx
function LogoOrFallback({ domain, name }: { domain: string; name: string }) {
  const [errored, setErrored] = useState(false);

  if (errored) {
    return (
      <div className="flex h-10 w-10 items-center justify-center rounded-md bg-neutral-200 font-medium text-neutral-600">
        {name[0]?.toUpperCase() ?? "?"}
      </div>
    );
  }

  return (
    <img
      src={`https://api.clearlogo.dev/logo/${domain}?size=64&content=80&token=${BROWSER_KEY}`}
      alt={`${name} logo`}
      width={40}
      height={40}
      className="rounded-md"
      onError={() => setErrored(true)}
    />
  );
}
```

## 8. ओपन ग्राफ छवि फॉलबैक

अपने स्वयं के dynamically-generated OG कार्ड में एक लोगो embed करने के लिए एक सर्वर-साइड fetch का उपयोग करें।

```ts
// app/og/route.ts (Next.js, Edge runtime)
import { ImageResponse } from "next/og";

export const runtime = "edge";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const domain = searchParams.get("domain") ?? "example.com";

  const logoUrl = `https://api.clearlogo.dev/logo/${domain}?size=256&content=80&token=YOUR_SERVER_KEY`;

  return new ImageResponse(
    (
      <div style={{ display: "flex", alignItems: "center", padding: 64 }}>
        <img src={logoUrl} width={128} height={128} alt="" />
        <span style={{ marginLeft: 32, fontSize: 64 }}>{domain}</span>
      </div>
    ),
    { width: 1200, height: 630 },
  );
}
```

यहाँ एक **सर्वर** कुंजी का उपयोग करें, एक ब्राउज़र कुंजी नहीं।

## 9. संवेदनशील UI के लिए बैकएंड हस्ताक्षर

जब आप URL सार्वजनिक नहीं चाहते हैं, अपने backend के माध्यम से proxy करें।

```ts
// app/api/logo/[domain]/route.ts (Next.js)
export async function GET(
  request: Request,
  { params }: { params: { domain: string } },
) {
  const upstream = await fetch(
    `https://api.clearlogo.dev/logo/${params.domain}?size=128&content=80`,
    { headers: { Authorization: `Bearer ${process.env.CLEARLOGO_SERVER_KEY}` } },
  );
  return new Response(upstream.body, {
    headers: {
      "Content-Type": upstream.headers.get("Content-Type") ?? "image/png",
      "Cache-Control": "public, max-age=86400, s-maxage=86400",
    },
  });
}
```

अब आपका फ्रंटएंड `/api/logo/{domain}` का उपयोग करता है।

## 10. TypeScript सहायक

एक एकल सहायक पूरे कोडबेस में URL निर्माण को सुसंगत रखता है।

```ts
type LogoOptions = {
  size?: 16 | 32 | 48 | 64 | 96 | 128 | 192 | 256 | 512 | 1024;
  content?: number; // 50–100, step 5
  theme?: "light" | "dark";
  format?: "png" | "webp" | "jpeg";
};

export function logoUrl(domain: string, opts: LogoOptions = {}): string {
  const params = new URLSearchParams({
    size: String(opts.size ?? 64),
    content: String(opts.content ?? 80),
    token: process.env.NEXT_PUBLIC_CLEARLOGO_KEY!,
  });
  if (opts.theme) params.set("theme", opts.theme);
  if (opts.format) params.set("format", opts.format);
  return `https://api.clearlogo.dev/logo/${encodeURIComponent(domain)}?${params}`;
}
```

`encodeURIComponent` डोमेन में असामान्य वर्णों से सुरक्षा देता है।

## 11. प्रारंभिक कनेक्शन को गर्म करने के लिए प्रीकनेक्ट करें

ऐसे dashboards के लिए जो कई लोगो रेंडर करते हैं, अपने दस्तावेज़ head में एक एकल `<link rel="preconnect">` जोड़ें।

```html
<link rel="preconnect" href="https://api.clearlogo.dev" crossorigin />
<link rel="dns-prefetch" href="https://api.clearlogo.dev" />
```

```tsx
// Next.js
import Head from "next/head";

export function ClearLogoPreconnect() {
  return (
    <Head>
      <link rel="preconnect" href="https://api.clearlogo.dev" crossOrigin="" />
      <link rel="dns-prefetch" href="https://api.clearlogo.dev" />
    </Head>
  );
}
```

`preconnect` DNS को हल करता है और TCP/TLS हैंडशेक खोलता है। Preload के बजाय यह बेहतर है क्योंकि preloads भारी हैं।

## FAQ

### मुझे किस रेसिपी से शुरू करना चाहिए?

यदि आप एक एकल लोगो रेंडर कर रहे हैं, तो सादा `<img>` रेसिपी पर्याप्त है। सूचियों और तालिकाओं के लिए, Tailwind अवतार स्लॉट और आलसी-लोड पैटर्न पर जाएं।

### क्या मुझे परीक्षण के लिए एक कुंजी की आवश्यकता है?

नहीं। एंडपॉइंट कम-मात्रा ब्राउजिंग के लिए गुमनाम रूप से काम करता है। उत्पादन में भेजने से पहले एक ब्राउज़र कुंजी जोड़ें।

### मुझे किस आकार का अनुरोध करना चाहिए?

CSS में प्रस्तुत आकार से मेल खाएं, फिर रेटिना तीक्ष्णता के लिए `2x` अनुरोध करें। एक 32-पिक्सल स्लॉट के लिए `1024` का अनुरोध न करें।

### मैं JavaScript के बिना गहरे मोड को कैसे संभालूं?

एक `<picture>` तत्व का उपयोग करें एक `<source>` के साथ `media="(prefers-color-scheme: dark)"` द्वारा फाटक किया गया।

### मैं लोगो की एक सूची को कितनी तेजी से लोड कर सकता हूं?

अपने दस्तावेज़ head में एक एकल `<link rel="preconnect" href="https://api.clearlogo.dev">` जोड़ें।

### API जब कोई लोगो देता है तो मैं फॉलबैक कैसे दिखाता हूं?

`<img>` पर `onError` सुनें और एक अक्षर-अवतार में स्वैप करें।

### क्या मैं एक सर्वर-साइड रेंडर से एक ब्राउज़र कुंजी का उपयोग कर सकता हूं?

आप कर सकते हैं — लेकिन एक सर्वर कुंजी एक बेहतर फिट है। Next.js सर्वर घटकों, OG मार्गों या बैकएंड प्रॉक्सी के लिए, एक सर्वर कुंजी का उपयोग करें।

### मैं अपने स्वयं के CDN पर लोगो को कैसे कैश करूँ?

ऊपर बैकएंड-हस्ताक्षर रेसिपी का उपयोग करें। अपस्ट्रीम प्रतिक्रिया दीर्घ-जीवित `Cache-Control` शामिल करती है।