### Run SponsorKit CLI

Source: https://github.com/antfu-collective/sponsorkit/blob/main/README.md

Execute SponsorKit using npx for command-line operations. This is the simplest way to generate sponsor images.

```bash
npx sponsorkit
```

--------------------------------

### Environment Variables for SponsorKit

Source: https://github.com/antfu-collective/sponsorkit/blob/main/README.md

Configure SponsorKit providers and modes using environment variables in a .env file. Ensure correct scopes for GitHub tokens.

```ini
; GitHub provider.
; Token requires the `read:user` and `read:org` scopes.
SPONSORKIT_GITHUB_TOKEN=
SPONSORKIT_GITHUB_LOGIN=
; Optional data mode:
; - sponsors: people sponsoring you (default)
; - sponsees: people you have sponsored, including past sponsorships
SPONSORKIT_MODE=sponsors

; Patreon provider.
; Create v2 API key at https://www.patreon.com/portal/registration/register-clients
; and use the "Creator’s Access Token".
SPONSORKIT_PATREON_TOKEN=

; OpenCollective provider.
; Create an API key at https://opencollective.com/applications
SPONSORKIT_OPENCOLLECTIVE_KEY=
; and provide the ID, slug or GitHub handle of your account.
SPONSORKIT_OPENCOLLECTIVE_ID=
; or
SPONSORKIT_OPENCOLLECTIVE_SLUG=
; or
SPONSORKIT_OPENCOLLECTIVE_GH_HANDLE=
; If it is a personal account, set it to `person`. Otherwise not set or set to `collective`
SPONSORKIT_OPENCOLLECTIVE_TYPE=

;Afdian provider.
; Get user_id at https://afdian.com/dashboard/dev
SPONSORKIT_AFDIAN_USER_ID=
; Create token at https://afdian.com/dashboard/dev
SPONSORKIT_AFDIAN_TOKEN=

; Polar provider.
; Get your token at https://polar.sh/settings
SPONSORKIT_POLAR_TOKEN=
; The name of the organization to fetch sponsorships from.
SPONSORKIT_POLAR_ORGANIZATION=

; Liberapay provider.
; The name of the profile.
SPONSORKIT_LIBERAPAY_LOGIN=

```

--------------------------------

### Configure Multiple Sponsor Image Renders

Source: https://github.com/antfu-collective/sponsorkit/blob/main/README.md

Use the `renders` field to define multiple configurations for generating sponsor images. Each configuration can specify its own name, formats, width, and renderer.

```typescript
import { defineConfig, tierPresets } from 'sponsorkit'

export default defineConfig({
  // Providers configs
  github: { /* ... */ },

  // Default configs
  width: 800,
  tiers: [
    /* ... */
  ],

  // Define multiple renders, each will inherit the top-level configs
  renders: [
    {
      name: 'sponsors.tiers',
      formats: ['svg'],
    },
    {
      name: 'sponsors.wide',
      width: 1200,
    },
    {
      name: 'sponsors.circles',
      renderer: 'circles',
      width: 600,
    },
    // ...
  ],
})
```

--------------------------------

### Configure SponsorKit with JavaScript

Source: https://github.com/antfu-collective/sponsorkit/blob/main/README.md

Define detailed configurations for SponsorKit using a JavaScript file. This allows customization of data modes, providers, rendering options, and sponsor tiers.

```typescript
import { defineConfig, tierPresets } from 'sponsorkit'

export default defineConfig({
  // Data mode:
  // - sponsors: people sponsoring you (default)
  // - sponsees: people you have sponsored, including past sponsorships
  mode: 'sponsors',

  // Providers configs
  github: {
    login: 'antfu',
    type: 'user',
  },
  opencollective: {
    // ...
  },
  patreon: {
    // ...
  },
  afdian: {
    // ...
  },
  polar: {
    // ...
  },
  liberapay: {
    // ...
  },

  // Rendering configs
  width: 800,
  renderer: 'tiers', // or 'circles'
  formats: ['json', 'svg', 'png', 'webp'],
  tiers: [
    // Past sponsors, currently only supports GitHub
    {
      title: 'Past Sponsors',
      monthlyDollars: -1,
      preset: tierPresets.xs,
    },
    // Default tier
    {
      title: 'Backers',
      preset: tierPresets.base,
    },
    {
      title: 'Sponsors',
      monthlyDollars: 10,
      preset: tierPresets.medium,
    },
    {
      title: 'Silver Sponsors',
      monthlyDollars: 50,
      preset: tierPresets.large,
    },
    {
      title: 'Gold Sponsors',
      monthlyDollars: 100,
      preset: tierPresets.xl,
    },
  ],
})
```

--------------------------------

### Configure Circles Renderer

Source: https://github.com/antfu-collective/sponsorkit/blob/main/README.md

Set the renderer to 'circles' in your SponsorKit configuration to display sponsors as packed circles. This provides an alternative visual representation.

```typescript
export default defineConfig({
  renderer: 'circles',
  // ...
})
```

--------------------------------

### Configure Tiers Renderer

Source: https://github.com/antfu-collective/sponsorkit/blob/main/README.md

Set the renderer to 'tiers' in your SponsorKit configuration to display sponsors organized into defined tiers. This is the default renderer.

```typescript
export default defineConfig({
  renderer: 'tiers',
  // ...
})
```

--------------------------------

### Fetch Sponsors Programmatically

Source: https://github.com/antfu-collective/sponsorkit/blob/main/README.md

Utilize SponsorKit's programmatic API to fetch sponsor data. This is useful for integrating sponsor fetching into your own applications or scripts.

```typescript
import { fetchSponsors } from 'sponsorkit'

const sponsors = await fetchSponsors({
  github: {
    token,
    login,
  },
  // ...
})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.