NPM Version Badge - Svelte Shields

Props #

- packageName
- tag
- style
- 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 NpmVersionPropsType extends ExtendedStyle {
  packageName: string;
  tag?: 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 version of svelte NPM version of @sveltejs/kit
<script lang="ts">
  import { NpmVersion, type NpmVersionPropsType } from 'svelte-shields';

  const basic: NpmVersionPropsType = {
    packageName: 'svelte'
  };
  const basic2: NpmVersionPropsType = {
    packageName: '@sveltejs/kit'
  };
</script>

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

Style #

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

NPM version of svelte NPM version of svelte NPM version of svelte NPM version of svelte NPM version of svelte
<script lang="ts">
  import { NpmVersion, type NpmVersionPropsType } from 'svelte-shields';

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

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

Color #

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

NPM version of svelte NPM version of svelte NPM version of svelte NPM version of svelte NPM version of svelte NPM version of svelte
<script lang="ts">
  import { NpmVersion, type NpmVersionPropsType } from 'svelte-shields';

  const color1: NpmVersionPropsType = {
    packageName: 'svelte',
    color: 'green'
  };

  const color2: NpmVersionPropsType = {
    packageName: 'svelte',
    color: '00FF00'
  };

  const color3: NpmVersionPropsType = {
    packageName: 'svelte',
    color: 'rgb(0, 255, 0)'
  };

  const color4: NpmVersionPropsType = {
    packageName: 'svelte',
    color: 'rgba(0, 255, 0, 1)'
  };

  const color5: NpmVersionPropsType = {
    packageName: 'svelte',
    color: 'hsl(120, 100%, 50%)'
  };

  const color6: NpmVersionPropsType = {
    packageName: 'svelte',
    color: 'hsla(120, 100%, 50%, 1)'
  };
</script>

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

Logo & Label #

NPM version of svelte
<script lang="ts">
  import { NpmVersion, type NpmVersionPropsType } from 'svelte-shields';

  const logo_label: NpmVersionPropsType = {
    packageName: 'svelte',
    logo: 'svelte',
    label: 'SVELTE'
  };
</script>

<NpmVersion {...logo_label} />

Link #

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

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

  const link: NpmVersionPropsType = {
    packageName: 'svelte',
    label: 'Svelte',
    link: ['https://svelte.dev', 'https://github.com/sveltejs/svelte']
  };
</script>

<NpmVersion {...link} />

Tag #

NPM version of svelte-awesome-icons NPM version of svelte-awesome-icons
<script lang="ts">
  import { NpmVersion, type NpmVersionPropsType } from 'svelte-shields';

  const basic: NpmVersionPropsType = {
    packageName: 'svelte-awesome-icons'
  };
  const basic2: NpmVersionPropsType = {
    packageName: 'svelte-awesome-icons',
    tag: 'v1-latest'
  };
</script>

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

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).

NPM version of svelte
<script lang="ts">
  import { NpmVersion, type NpmVersionPropsType } from 'svelte-shields';

  const other: NpmVersionPropsType = {
    packageName: 'svelte',
    cacheSeconds: '86400'
  };
</script>

<NpmVersion {...other} />