svelte-github-corner

 Svelte GitHub Corner

Live demo

🔨   Installation

npm install -D svelte-github-corner

📙   Usage

<script>
  import GitHubCorner from 'svelte-github-corner'
</script>

<!-- minimal -->
<GitHubCorner href="https://github.com/janosh/svelte-github-corner" />

<!-- kitchen sink -->
<GitHubCorner
  href="https://github.com/janosh/svelte-github-corner"
  title="Fancy words"
  ariaLabel="Click here for riches"
  target="_blank"
  corner="top-left"
  style="z-index: 42;"
  --ghc-bg="white"
  --ghc-color="var(--bodyBg)"
/>

🔣   Props

• href: string: (required) The GitHub URL to link to.
• title: string = 'View code on GitHub': Text to display in hover tooltip.
• ariaLabel: string = title: Accessible name for SVG button describing its function. See MDN. Should not be set to empty string.
• target: '_self' | '_blank' = '_self': Whether to open href in same ('_self') or new tab ('_blank').
• corner: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'top-right': Which corner of the screen to position the Octocat. 'bottom-(left|right)' look bad, shouldn't normally be used.
• style: string = '': Inline styles that will be applied to the <a> tag.

✨   Styling

With CSS variables:

fill: var(--ghc-bg, black);
color: var(--ghc-color, white);
width: var(--ghc-size, min(50pt, 15vw));

Can be passed as props or set in a global stylesheet.