GitHub Download Badge - Svelte Shields
Props #
- user
- repo
- 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 GitHubDownloadPropsType extends ExtendedStyle {
user: string;
repo: 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.
<script lang="ts">
import { GitHubDownload, type GitHubDownloadPropsType } from 'svelte-shields';
const basic: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects'
};
</script>
<GitHubDownload {...basic} />
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 { GitHubDownload, type GitHubDownloadPropsType } from 'svelte-shields';
const style1: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
style: 'flat'
};
const style2: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
style: 'flat-square'
};
const style3: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
style: 'for-the-badge'
};
const style4: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
style: 'plastic'
};
const style5: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
style: 'social'
};
</script>
<div class="grid gap-4">
<GitHubDownload {...style1} />
<GitHubDownload {...style2} />
<GitHubDownload {...style3} />
<GitHubDownload {...style4} />
<GitHubDownload {...style5} />
</div>
Color #
Background color of the right part (hex, rgb, rgba, hsl, hsla and css named colors supported).
<script lang="ts">
import { GitHubDownload, type GitHubDownloadPropsType } from 'svelte-shields';
const color1: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
color: 'red'
};
const color2: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
color: 'FF0000'
};
const color3: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
color: 'rgb(255, 0, 0)'
};
const color4: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
color: 'rgba(255, 0, 0, 1) '
};
const color5: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
color: 'hsl(0, 100%, 50%)'
};
const color6: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
color: 'hsla(0, 100%, 50%, 1)'
};
</script>
<div class="grid gap-4">
<GitHubDownload {...color1} />
<GitHubDownload {...color2} />
<GitHubDownload {...color3} />
<GitHubDownload {...color4} />
<GitHubDownload {...color5} />
<GitHubDownload {...color6} />
</div>
Logo & Label #
<script lang="ts">
import { GitHubDownload, type GitHubDownloadPropsType } from 'svelte-shields';
const logo_label: GitHubDownloadPropsType = {
user: 'facebook',
repo: 'react',
logo: 'react'
};
</script>
<GitHubDownload {...logo_label} />
Link #
Specify what clicking on the left/right of a badge should do.
<script lang="ts">
import { GitHubDownload, type GitHubDownloadPropsType } from 'svelte-shields';
const link: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
link: ['https://teffects.codewithshin.com', 'https://github.com/shinokada/teffects']
};
</script>
<GitHubDownload {...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 { GitHubDownload, type GitHubDownloadPropsType } from 'svelte-shields';
const other: GitHubDownloadPropsType = {
user: 'shinokada',
repo: 'teffects',
cacheSeconds: '86400'
};
</script>
<GitHubDownload {...other} />