Getting started

Install

npm install football-logos

Quick example

import { FootballLogo } from "football-logos/react";

<FootballLogo country="germany" club="bayern-munchen" size={48} />

<script setup>
  import FootballLogo from "football-logos/vue";
</script>

<FootballLogo country="germany" club="bayern-munchen" size={48} />

<script>
  import FootballLogo from "football-logos/svelte";
</script>

<FootballLogo country="germany" club="bayern-munchen" size={48} />

---
import FootballLogo from "football-logos/astro";
---

<FootballLogo country="germany" club="bayern-munchen" size={48} />

Pass a country slug and a club slug. club can be a team or a league. Omit club to show that country's top-flight league badge.

See Usage for league slugs and caching. Listing and catalog helpers are under Other functions.

Catalog updates

The package ships a catalog snapshot. Lookups use that until you refresh it. On a long-lived Node server, call startCatalogRefresh() once at startup. Static builds should loadCatalog() once at build time.

See startCatalogRefresh() for how to implement it in React, Vue, Svelte, and Astro.