Version Badge - Svelte Shields

Props #

- source
- packageName
- jsr_scope
- npm_tag
- pypiBaseUrl
- 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 VersionPropsType extends ExtendedStyle {
  source: 'jsr' | 'npm' | 'pypi';
  packageName: string;
  jsr_scope?: string;
  npm_tag?: string;
  pypiBaseUrl?: string;
}

Examples #

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

  const basic: VersionPropsType = {
    source: 'npm',
    packageName: 'svelte-shields',
    color: 'red'
  };
  const basic2: VersionPropsType = {
    source: 'jsr',
    jsr_scope: '@hono',
    packageName: 'hono',
    color: 'red'
  };
  const basic3: VersionPropsType = {
    source: 'pypi',
    packageName: 'vennfig',
    color: 'red'
  };
</script>

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