/wc-social-link

A vanilla web component for social media links

Primary LanguageJavaScriptMIT LicenseMIT

GitHub Releases NPM Release Bundlephobia MIT License Published on WebComponents.org Latest Status Release Status

A Vanilla Web Component for easily defining links to social network profiles

This component provides a simple way to embed social network links into your site. The icons are optimized SVG symbols optimized for efficient loading and easy styling.

Note More types can be requested in the issues.

Installation

npm i @vanillawc/wc-social-link

Then import the index.js file at the root of the package.

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 network="github" handle="evanplaice"></wc-social>

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 network="github" href="https://github.com/evanplaice"></wc-social>

Demos

WC-Social-Link-Demo - WebComponents.dev