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

सामान्य आकार के लिए व्यावहारिक स्निपेट: एक <img> टैग, एक React घटक, एक Next.js Image, एक Tailwind अवतार स्लॉट, एक गहरी-मोड-जागरूक <picture> तत्व, एक OG छवि फॉलबैक, और एक सर्वर-हस्ताक्षरित URL। हर स्निपेट सार्वजनिक https://api.clearlogo.dev एंडपॉइंट के विरुद्ध काम करता है।

सभी उदाहरण मानते हैं कि आपके पास एक ब्राउज़र कुंजी (ग्राहक कोड के लिए) या एक सर्वर कुंजी (बैकएंड कोड के लिए) है। डैशबोर्ड से एक कुंजी बनाएं।

1. सादा HTML

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

<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 आवश्यकताओं को कवर करता है।

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> घटक का उपयोग करें।

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

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 स्लॉट में ड्रॉप करें जो ब्रांड में दृश्य रूप से सुसंगत रहता है।

<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 स्रोत के साथ ताकि ब्राउज़र पेंट समय पर गहरी संस्करण को स्वैप करे।

<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 घटक के रूप में लपेटा:

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 रेंडर करें।

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 रेंडर करें।

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 का उपयोग करें।

// 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 करें।

// 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 निर्माण को सुसंगत रखता है।

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"> जोड़ें।

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

// 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 शामिल करती है।