NPM Download Badge - Svelte Shields

Props #

- interval = 'dw'
- 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 NpmDownloadPropsType extends ExtendedStyle {
  interval?: 'dw' | 'dm' | 'dy' | 'd18m';
  packageName: string;
}

Examples #

Basic usage #

packageName may be the name of an unscoped package like package-name or a scoped package like @author/package-name.

tag can be next, v1, v2, beta, etc.

NPM dw Downloads - flowbite-svelte-icons

NPM dm Downloads - flowbite-svelte-icons

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

  const basic: NpmDownloadPropsType = {
    packageName: 'flowbite-svelte-icons'
  };

  const basic2: NpmDownloadPropsType = {
    packageName: 'flowbite-svelte-icons',
    interval: 'dm'
  };
</script>

<div class="grid gap-4">
  <NpmDownload {...basic} />
  <NpmDownload {...basic2} />
</div>

Style #

Possible values: flat, flat-square, plastic, for-the-badge, social. If not specified, the default style for this badge is "flat".

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

  const style1: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    style: 'flat'
  };
  const style2: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    style: 'flat-square'
  };
  const style3: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    style: 'for-the-badge'
  };
  const style4: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    style: 'plastic'
  };
  const style5: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    style: 'social'
  };
</script>

<div class="grid gap-4">
  <NpmDownload {...style1} />
  <NpmDownload {...style2} />
  <NpmDownload {...style3} />
  <NpmDownload {...style4} />
  <NpmDownload {...style5} />
</div>

Color #

Background color of the right part (hex, rgb, rgba, hsl, hsla and css named colors supported).

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

  const color1: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    color: 'indigo'
  };
  const color2: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    color: '4B0082'
  };
  const color3: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    color: 'rgb(75, 0, 130)'
  };
  const color4: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    color: 'rgba(75, 0, 130, 1)'
  };

  const color5: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    color: 'hsl(275, 100%, 25%)'
  };

  const color6: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    color: 'hsla(275, 100%, 25%, 1)'
  };
</script>

<div class="grid gap-4">
  <NpmDownload {...color1} />
  <NpmDownload {...color2} />
  <NpmDownload {...color3} />
  <NpmDownload {...color4} />
  <NpmDownload {...color5} />
  <NpmDownload {...color6} />
</div>

Logo & Label #

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

  const logo_label: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    logo: 'svelte',
    label: 'Svelte Awesome Icons'
  };
</script>

<NpmDownload {...logo_label} />

Link #

Specify what clicking on the left/right of a badge should do.

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

  const link: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    logo: 'svelte',
    link: [
      'https://github.com/shinokada/svelte-awesome-icons',
      'https://svelte-awesome-icons.codewithshin.com'
    ]
  };
</script>

<NpmDownload {...link} />

Other #

cacheSeconds is HTTP cache lifetime (rules are applied to infer a default value on a per-badge basis, any values specified below the default will be ignored).

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

  const other: NpmDownloadPropsType = {
    packageName: 'svelte-awesome-icons',
    logo: 'svelte',
    label: 'Svelte Awesome Icons',
    cacheSeconds: '86400'
  };
</script>

<NpmDownload {...other} />