VueでツイートボタンやFacebookと連携するボタンを作成する

Laravelアプリケーションにvue-social-sharingを使ってシェアボタンを導入します。
以下の様なよくあるボタンですね！

npmでライブラリをインストールしてコードを書いていく。
シェア方法(twitter, facebook, etc...)は<network>タグで追加/削除できる。
<social-sharing>タグのプロパティとしてtitleやdescription、URLを渡すだけで各シェア先毎の設定をよしなにやってくれる。

<social-sharing url="https://vuejs.org/"
                      title="The Progressive JavaScript Framework"
                      description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                      quote="Vue is a progressive framework for building user interfaces."
                      hashtags="vuejs,javascript,framework"
                      twitter-user="vuejs"
                      inline-template>
  <div>
      <network network="email">
          <i class="fa fa-envelope"></i> Email
      </network>
      <!-- 中略 -->
      <network network="whatsapp">
        <i class="fa fa-whatsapp"></i> Whatsapp
      </network>
  </div>
</social-sharing>

特にスタイルを当てない場合、以下の様になる。

スタイルを当てるとこうなる。

ちなみにCSSはこんな感じ。

.share-buttons-componenta {
    .share-button {
        cursor: pointer;
        outline: none;
        appearance: none;

        width: 40px;
        height: 40px;
        color: white;
        border-radius: 3px;
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
    }
    .share-button.email {
        background-color: #952225;
    }
    .share-button.facebook {
        background-color: #3B569D;
    }
    .share-button.line {
        background-color: #45C405;
    }
    .share-button.skype {
        background-color: #24A8EB;
    }
    .share-button.twitter {
        background-color: #1DA1F2;
    }
}