License Badge - Svelte Shields

Props #

- source
- github_user
- github_repo
- npm_packageName
- npm_registry_uri
- 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 LicensePropsType extends ExtendedStyle {
  source: 'github' | 'npm';
  github_user?: string;
  github_repo?: string;
  npm_packageName?: string;
  npm_registry_uri?: string;
}

Examples #

Basic usage #

Use npm or github for source. For github, github_user and github_repo are required. For npm, npm_packageName is required.

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

  const basic: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields'
  };

  const basic2: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields'
  };
</script>

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

Style #

GitHub

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

  const style1: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    style: 'flat'
  };
  const style2: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    style: 'flat-square'
  };
  const style3: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    style: 'for-the-badge'
  };
  const style4: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    style: 'plastic'
  };
  const style5: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    style: 'social'
  };
</script>

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

NPM

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

  const style6: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    style: 'flat'
  };
  const style7: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    style: 'flat-square'
  };
  const style8: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    style: 'for-the-badge'
  };
  const style9: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    style: 'plastic'
  };
  const style10: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    style: 'social'
  };
</script>

<div class="grid gap-4">
  <License {...style6} />
  <License {...style7} />
  <License {...style8} />
  <License {...style9} />
  <License {...style10} />
</div>

Color #

GitHub

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

  const color1: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    color: 'indigo'
  };
  const color2: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    color: '4B0082'
  };
  const color3: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    color: 'rgb(75, 0, 130)'
  };
  const color4: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    color: 'rgba(75, 0, 130, 1)'
  };
  const color5: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    color: 'hsl(275, 100%, 25%)'
  };
  const color6: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    color: 'hsla(275, 100%, 25%, 1)'
  };
</script>

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

NPM

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

  const color7: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    color: 'indigo'
  };
  const color8: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    color: '4B0082'
  };
  const color9: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    color: 'rgb(75, 0, 130)'
  };
  const color10: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    color: 'rgba(75, 0, 130, 1)'
  };
  const color11: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    color: 'hsl(275, 100%, 25%)'
  };
  const color12: LicensePropsType = {
    source: 'npm',
    npm_packageName: 'svelte-shields',
    color: 'hsla(275, 100%, 25%, 1)'
  };
</script>

<div class="grid gap-4">
  <License {...color7} />
  <License {...color8} />
  <License {...color9} />
  <License {...color10} />
  <License {...color11} />
  <License {...color12} />
</div>

Logo and Label #

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

  const logo_label: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    logo: 'svelte',
    label: 'LICENSE'
  };
</script>

<License {...logo_label} />

Link #

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

  const link: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    logo: 'svelte',
    link: ['https://github.com/shinokada/svelte-shields', 'https://svelte-shields.codewithshin.com']
  };
</script>

<License {...link} />

Other #

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

  const other: LicensePropsType = {
    source: 'github',
    github_user: 'shinokada',
    github_repo: 'svelte-shields',
    logo: 'svelte',
    label: 'Svelte Shields',
    cacheSeconds: '86400'
  };
</script>

<License {...other} />