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.

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

  const basic: LicensePropsType = {
    source: 'github',
    user: 'shinokada',
    repo: 'svelte-shields',
  }

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

<License {...basic} />
<License {...basic2} />

Style #

GitHub

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

  const basic: LicensePropsType = {
    source: 'github',
    user: 'shinokada',
    repo: 'svelte-shields',
  }

  const basic2: LicensePropsType = {
    source: 'npm',
    packageName: 'svelte-shields',
  }

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

<License {...style1} />
<License {...style2} />
<License {...style3} />
<License {...style4} />
<License {...style5} />

NPM

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

  const style6: LicensePropsType = {
    source: 'npm',
    packageName: 'svelte-shields',
    style: 'flat',
  }
  const style7: LicensePropsType = {
    source: 'npm',
    packageName: 'svelte-shields',
    style: 'flat-square',
  }
  const style8: LicensePropsType = {
    source: 'npm',
    packageName: 'svelte-shields',
    style: 'for-the-badge',
  }
  const style9: LicensePropsType = {
    source: 'npm',
    packageName: 'svelte-shields',
    style: 'plastic',
  }
  const style10: LicensePropsType = {
    source: 'npm',
    packageName: 'svelte-shields',
    style: 'social',
  }

</script>

<License {...style6} />
<License {...style7} />
<License {...style8} />
<License {...style9} />
<License {...style10} />

Color #

GitHub

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

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

<License {...color1} />
<License {...color2} />
<License {...color3} />
<License {...color4} />
<License {...color5} />
<License {...color6} />

NPM

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

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

<License {...color7} />
<License {...color8} />
<License {...color9} />
<License {...color10} />
<License {...color11} />
<License {...color12} />

Logo and Label #

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

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

<License {...logo_label} />

Link #

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

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


<License {...link} />

Other #

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

  const other: LicensePropsType = {
    source: 'github',
    user: 'shinokada',
    repo: 'svelte-shields',
    logo: 'svelte',
    label: 'Svelte Shields',
    cacheSeconds: '86400'
  }

</script>



<License {...other} />