The "Social" component helps you generate a social link to your Twitter, Dev, Medium, LinkedIn, GitHub accounts or a custom uri.

Table of contents


DeckDeckGo on Github


This component could be added to your web application using the following methods.

If you are using our Starter Kit, no need to worry about this, this component is included, therefore you could skip the "Installation" chapter.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo social component from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src=""></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/social

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:


import '@deckdeckgo/social';


import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/social/dist/loader'; deckDeckGoElement();


The "Social" Web Component could be integrated using the tag <deckgo-social/>.

<deckgo-social twitter="daviddalbusco"> <img data-src="/assets/twitter.svg" slot="icon"/> </deckgo-social>


The slot icon and the text are both optional.

If you don't provide a text, component will renders a corresponding text for you.


Automatic text:

<deckgo-social twitter="daviddalbusco"> <ion-icon slot="icon" name="logo-twitter"></ion-icon> </deckgo-social>

Custom text:

A link to Twitter

<deckgo-social twitter="daviddalbusco"> <ion-icon slot="icon" name="logo-twitter"></ion-icon> <span>A link to Twitter</span> </deckgo-social>

Without icon:


<deckgo-social twitter="daviddalbusco"> </deckgo-social>


This component offers the following options which could be set using attributes:

twitterstringYour Twitter username. It will be concatenated automatically with
linkedinstringYour Linkedin username. It will be concatenated automatically with
mediumstringYour Medium username. username will be replaced automatically from
devstringYour Dev username. It will be concatenated automatically with
githubstringYour Github username. It will be concatenated automatically with
fullUrlstringIn case you would like to provide the URI of your choice


Without any icons:

<deckgo-social twitter="daviddalbusco">Twitter</deckgo-social> <deckgo-social linkedin="david-dal-busco">Linkedin</deckgo-social> <deckgo-social medium="david.dalbusco">Medium</deckgo-social> <deckgo-social full-url="">Stackoverflow</deckgo-social>

With for example ion-icon:

<deckgo-social twitter="daviddalbusco"> <ion-icon slot="icon" name="logo-twitter"></ion-icon> Twitter </deckgo-social> <deckgo-social github="fluster/deckdeckgo"> <ion-icon slot="icon" name="logo-github"></ion-icon> DeckDeckGo on Github </deckgo-social>