# Letakkan logo perusahaan di aplikasi Anda — resep siap pakai

> Snippet praktis untuk bentuk umum tempat logo berakhir: tag `<img>`, komponen React, Next.js Image, slot avatar Tailwind, elemen `<picture>` yang sadar mode gelap, fallback gambar OG, dan URL yang ditandatangani server. Setiap snippet bekerja melawan endpoint publik `https://api.clearlogo.dev`.
>
> Semua contoh mengasumsikan Anda memiliki kunci browser (untuk kode klien) atau kunci server (untuk kode backend). [Buat kunci](https://clearlogo.dev/login?lang=id) dari dashboard.

## 1. HTML biasa

Integrasi tercepat yang mungkin — tempel URL ke tag `<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"
/>
```

Atur `size` agar sesuai dengan dimensi yang dirender sehingga browser tidak membuang bandwidth menskalakan aset yang lebih besar.

## 2. Komponen React

Komponen yang dapat digunakan kembali kecil mencakup sebagian besar kebutuhan UI produk.

```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"` dan `decoding="async"` menjaga daftar panjang (CRM, direktori, tabel akun) dari memblokir paint.

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

Tambahkan host API ke `next.config.js` sekali, kemudian gunakan komponen `<Image>` yang dioptimalkan di mana-mana.

```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
    />
  );
}
```

Minta `size * 2` untuk ketajaman retina pada layar HiDPI. Gunakan `unoptimized` jika Anda ingin negosiasi WebP dari API mengalir ke klien; lepaskan jika Anda ingin Next.js menangani negosiasi format itu sendiri.

## 4. Slot avatar Tailwind

Lepaskan logo ke slot UI tetap yang tetap konsisten secara visual di seluruh brand.

```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` ditambah ukuran slot tetap adalah bentuk paling dapat diandalkan untuk tabel dan daftar. Pasangkan dengan parameter `content=80` sehingga logo tidak pernah menabrak tepi slot.

## 5. Logo yang menyadari mode gelap

Gunakan `<picture>` dengan sumber `prefers-color-scheme` sehingga browser menukar varian gelap pada waktu paint — tidak ada JavaScript, tanpa rerender, dan tanpa hook per-logo yang dijalankan dalam daftar 50.

```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>
```

Dibungkus sebagai komponen 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 kembali ke varian terang ketika tidak ada versi gelap, jadi selalu aman untuk meminta `theme=dark`. Untuk switch tema tingkat aplikasi (bukan tingkat OS), kendarai URL sumber dari status tema Anda sebagai ganti `prefers-color-scheme`.

## 6. Rendering daftar dengan placeholder

Untuk daftar panjang, render placeholder segera sehingga slot kosong tidak berkedip.

```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>
  );
}
```

Latar belakang netral mengisi slot secara instan, dan logo memudar setelah didecode.

## 7. Fallback kesalahan dengan huruf pertama

Jika API tidak dapat menemukan logo untuk domain, render avatar huruf deterministik sebagai gantinya.

```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)}
    />
  );
}
```

Fallback tidak pernah network-request, jadi bahkan baris dingin tetap cepat.

## 8. Fallback gambar Open Graph

Gunakan fetch sisi server untuk menanamkan logo ke dalam kartu OG yang dihasilkan secara dinamis Anda sendiri.

```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 },
  );
}
```

Gunakan kunci **server** di sini, bukan kunci browser — Edge function adalah sisi server, dan kunci server adalah yang bertahan di atas header origin yang tidak terbatas.

## 9. Penandatanganan backend untuk UI sensitif

Ketika Anda tidak ingin URL publik (misalnya alat admin internal), proxy melalui backend Anda.

```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",
    },
  });
}
```

Sekarang frontend Anda menggunakan `/api/logo/{domain}` — tidak ada API key dalam sumber halaman, dan Anda mengontrol caching di CDN Anda sendiri.

## 10. Helper TypeScript

Helper tunggal membuat konstruksi URL konsisten di seluruh codebase.

```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` melindungi dari karakter yang tidak biasa dalam domain dan membuat helper aman untuk dipanggil dengan input yang tidak dipercaya.

## 11. Preconnect untuk menghangat koneksi lebih awal

Untuk dashboard yang merender puluhan logo di atas garis, isyaratkan browser untuk mulai mengambil lebih awal.

```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` menyelesaikan DNS dan membuka handshake TCP/TLS secara instan; `dns-prefetch` adalah fallback murah untuk browser yang mengabaikan preconnect. Dua petunjuk total, terlepas dari berapa banyak logo yang dirender halaman. Lebih suka ini daripada `<link rel="preload" as="image">` per logo — preload berat, menghitung terhadap anggaran bandwidth, dan tidak membantu jika URL yang dirender berakhir sedikit berbeda (ukuran, tema, token) dari yang dimuat sebelumnya.

## FAQ

### Resep mana yang harus saya mulai?

Jika Anda merender logo tunggal, resep `<img>` biasa sudah cukup. Untuk daftar dan tabel, langsung ke slot avatar Tailwind dan pola lazy-load.

### Apakah saya memerlukan kunci untuk pengujian?

Tidak. Endpoint berfungsi secara anonim untuk browsing volume rendah. Tambahkan kunci browser sebelum Anda meluncurkan ke produksi sehingga permintaan benar-benar diatribusikan dan dihitung terhadap rencana Anda.

### Ukuran apa yang harus saya minta?

Cocokkan ukuran yang dirender dalam CSS, kemudian minta `2x` itu untuk ketajaman retina. Jangan minta `1024` untuk slot 32-piksel — itu menghabiskan bandwidth dan tidak terlihat lebih baik.

### Bagaimana cara menangani mode gelap tanpa JavaScript?

Gunakan elemen `<picture>` dengan `<source>` yang dibatasi oleh `media="(prefers-color-scheme: dark)"`. Browser memilih URL yang tepat pada waktu paint — tidak ada React hook, tidak ada rerender per logo, tidak ada per-row overhead bahkan dalam daftar panjang.

### Bagaimana cara membuat daftar logo dimuat lebih cepat?

Tambahkan single `<link rel="preconnect" href="https://api.clearlogo.dev">` di kepala dokumen Anda. Itu membuka DNS/TCP/TLS sekali untuk setiap logo di halaman, yang lebih murah daripada `<link rel="preload">` per URL.

### Bagaimana cara menampilkan fallback ketika API mengembalikan tidak ada logo?

Dengarkan `onError` pada `<img>` dan tukar ke avatar huruf atau ikon generik. Resep fallback kesalahan di atas adalah bentuk produksi.

### Bisakah saya menggunakan kunci browser dari render sisi server?

Anda dapat — tetapi kunci server adalah yang cocok lebih baik karena mengirim permintaan via `Authorization: Bearer …` daripada mengandalkan pemeriksaan asal. Untuk Next.js Server Components, rute OG, atau backend proxy, gunakan kunci server.

### Bagaimana cara cache logo di CDN saya sendiri?

Gunakan resep penandatanganan backend di atas. Respons upstream mencakup `Cache-Control` yang tahan lama, jadi Anda dapat mengatur header yang sama pada proxy Anda dan biarkan CDN Anda melakukan sisanya.