Cliqz Logo Database

0.7.0 · active · verified Wed Apr 22

cliqz-logo-database is a JavaScript library providing programmatic access to a curated, local database of company and brand logos. It enables developers to retrieve a logo's URL and primary color information based on a given website URL. Currently at version 0.7.0, it ships with TypeScript types, facilitating its integration into modern TypeScript projects. The library's primary differentiator is its ability to offer an offline-first lookup for logos, circumventing the need for external API calls for recognized brands. It supports both ESM and CommonJS import patterns, offering flexibility across various JavaScript environments. While stable at its current version, being pre-1.0 suggests the API might evolve in future major releases, although active development status beyond maintenance is not explicitly stated.

Common errors

```
TypeError: getLogo is not a function
```
cause Attempting to use `require('cliqz-logo-database')` directly as a function in CommonJS, without accessing the `.default` property.

fix Use `const getLogo = require('cliqz-logo-database').default;` for CommonJS environments.
```
SyntaxError: The requested module 'cliqz-logo-database' does not provide an export named 'getLogo'
```
cause Attempting to import `getLogo` as a named export (`import { getLogo } from 'cliqz-logo-database';`) when it is a default export.

fix Import `getLogo` as a default export: `import getLogo from 'cliqz-logo-database';`
```
TypeError: Cannot read properties of null (reading 'url')
```
cause Accessing properties on the `logo` object without first checking if `getLogo()` returned `null` for an unknown URL.

fix Implement a null check: `const logo = getLogo(url); if (logo) { console.log(logo.url); } else { console.log('No logo found.'); }`

Warnings

breaking As the library is currently at version 0.7.0 (pre-1.0), the API surface is subject to change without adherence to semantic versioning for breaking changes. Developers should review release notes carefully when upgrading to new minor versions.
Fix: Always check the release notes before upgrading pre-1.0 versions. Pin exact versions in production environments.
gotcha The logo database is bundled directly with the package, meaning it represents a snapshot of logo data at the time of the package's release. It does not update in real-time. Newly launched websites or updated logos for existing sites may not be included until a new package version is released.
Fix: Be aware of potential data staleness. For frequently changing or very new brand logos, an external, real-time API might be necessary.
gotcha The `getLogo` function returns `null` if a logo for the given URL is not found in its internal database. Failing to check for `null` can lead to `TypeError` when attempting to access properties like `logo.url` or `logo.color`.
Fix: Always check the return value of `getLogo` before accessing its properties, e.g., `if (logo) { /* use logo */ }`.

Install

npm install cliqz-logo-database npm
yarn add cliqz-logo-database yarn
pnpm add cliqz-logo-database pnpm

Imports

getLogo
wrong:
```
import { getLogo } from 'cliqz-logo-database';
```
correct:
```
import getLogo from 'cliqz-logo-database';
```
The primary `getLogo` function is exported as a default export in ESM. Attempting to destructure it as a named export will fail.
getLogo (CommonJS)
wrong:
```
const getLogo = require('cliqz-logo-database');
```
correct:
```
const getLogo = require('cliqz-logo-database').default;
```
When using CommonJS `require()`, the default export is accessed via the `.default` property of the imported module object.
Logo (Type)
```
import type { Logo } from 'cliqz-logo-database';
```
Import the `Logo` interface for type-checking the returned object if using TypeScript, although it's an inline type.

Quickstart

This quickstart demonstrates how to import and use the `getLogo` function to fetch logo information for various URLs. It includes type safety for the `Logo` object and handles cases where no logo is found, logging the details to the console.

import getLogo from 'cliqz-logo-database';

interface CliqzLogo {
  color: string;
  url: string;
}

function retrieveAndDisplayLogo(targetUrl: string): void {
  console.log(`Attempting to retrieve logo for: ${targetUrl}`);
  const logo: CliqzLogo | null = getLogo(targetUrl);

  if (logo) {
    console.log(`  Found logo!`);
    console.log(`    URL: ${logo.url}`);
    console.log(`    Primary Color: #${logo.color}`);
    // In a browser environment, you might embed it like this:
    // const img = document.createElement('img');
    // img.src = logo.url;
    // img.alt = `Logo for ${targetUrl}`;
    // document.body.appendChild(img);
  } else {
    console.warn(`  No logo found in the database for ${targetUrl}.`);
  }
}

retrieveAndDisplayLogo('https://cliqz.com');
retrieveAndDisplayLogo('https://github.com');
retrieveAndDisplayLogo('https://www.typescriptlang.org');
retrieveAndDisplayLogo('https://an-unknown-website.xyz');

view raw JSON →