Download Badge - Svelte Shields

Props #

- source
- user
- repo
- interval
- packageName
- style = 'flat'
- logo
- logoColor
- logoSize
- label
- labelColor
- color
- cacheSeconds
- link
- class: classname
- ...attributes

Types #

import type { HTMLImgAttributes } from 'svelte/elements';

export type LinkType = string[] | [string, string];
export interface BaseBadgePropsType {
  style?: 'flat' | 'flat-square' | 'for-the-badge' | 'plastic' | 'social';
  logo?: string | undefined | null;
  logoColor?: string | undefined | null;
  logoSize?: string | undefined | null;
  label?: string | undefined | null;
  labelColor?: string | undefined | null;
  color?: string | undefined | null;
  cacheSeconds?: string | undefined | null;
  link?: LinkType;
  class?: string | undefined | null;
}
interface ExtendedStyle extends BaseBadgePropsType, HTMLImgAttributes {
  style?: 'flat' | 'flat-square' | 'for-the-badge' | 'plastic' | 'social';
}

export interface DownloadPropsType extends ExtendedStyle {
  source: 'npm' | 'github';
  user?: string;
  repo?: string;
  interval?: 'dw' | 'dm' | 'dy' | 'd18m';
  packageName?: string;
}

Examples #

<script lang="ts">
  import { Download, type DownloadPropsType } from 'svelte-shields';

  const npmdownload: DownloadPropsType = {
    source: 'npm',
    packageName: 'svelte-shields',
    interval: 'dw',
    color: 'red'
  };
  const githubdownload: DownloadPropsType = {
    source: 'github',
    user: 'shinokada',
    repo: 'tera',
    color: 'red'
  };
</script>

<div class="grid gap-4">
  <Download {...npmdownload} />
  <Download {...githubdownload} />
</div>