Vue.jsでソーシャルボタンを設置する「vuesocial」

by kabanoki

HTML

<div id="app">
  <gb-social-button
    :icon-path="iconPath"
    network="wordpress"
    size="small"
    theme="light"
  >
    Wordpress
  </gb-social-button>
  <gb-social-button
    :icon-path="iconPath"
    network="facebook"
    size="small"
    theme="light"
  >
    FaceBook
  </gb-social-button>
  <gb-social-button
    :icon-path="iconPath"
    network="twitter"
    size="small"
    theme="light"
  >
  Twitter
  </gb-social-button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
  const VueDarkMode =[];
</script>
<script src="https://cdn.jsdelivr.net/npm/@growthbunker/[email protected]/dist/vuesocial.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align:center;
}

Vue

new Vue({
  el: '#app',
  data: {
    iconPath:'https://raw.githubusercontent.com/growthbunker/vuesocial/09bfd3fa5befaf32a8bf341428929cc04b5ec581/assets/networks/'
  }
});