Skip to content

A vanilla web component for social media links

License

Notifications You must be signed in to change notification settings

vanillawc/wc-social-link

Repository files navigation

<wc-social-link> Icon Links for Social Media

GitHub Releases NPM Releases Bundlephobia Latest Status Release Status

Discord Published on WebComponents.org

Installation

Installation

npm i @vanillawc/wc-social-link

Import from NPM

<script type="module" src="node_modules/@vanillawc/wc-social-link/index.js"></script>

Import from CDN

<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-social-link@1/index.js"></script>

Demo

Try it on WebComponents.dev

Usage

Attributes

  • network - the network type (ex twitter)
  • handle - the user handle/username
  • href - the link (optional)
  • title - the title/tooltip (optional) Custom Styles

Custom Styles

  • --width - width of the icon (default 32px)
  • --height - height of the icon (default 32px)
  • --color - the icon color (default black)

Basic Usage

Provide the name of the social network and your user handle

<wc-social-link network="github" handle="evanplaice"></wc-social-link>

Network Types

  • email
  • github
  • gitlab
  • linkedin
  • rss
  • stackoverflow
  • twitch
  • twitter

Note: For Stackoverflow, your USERID is your handle

Basic Usage w/ Custom Link

Alternatively, instead of providing a handle and relying on the built-in link you can just provide your own.

<wc-social-link network="github" href="https://github.com/evanplaice"></wc-social-link>

Contributing

See CONTRIBUTING.md