Merge branch 'add-share-button' into 'master'

Add share button

See merge request spraksamlingane/beta.ordbok.uib.no!27

src/components/ArticleFooter.vue

@@ -3,14 +3,15 @@
     <span v-if="webShareApiSupported">
       <button class="share_button" @click="shareViaWebShare">
         <span class = "share_text">Del ordet</span>
-        <font-awesome-icon icon="share-alt-square" size = "lg"/>
+        <v-icon dense>$vuetify.icons.share</v-icon>
       </button>
     </span>
   <span v-else>
       <button class="share_button">
           <ShareNetwork network="facebook"
+              title=""
               :url="share_link">
-              <font-awesome-icon :icon="['fab', 'facebook-square']" size="lg" />
+              <v-icon dense>$vuetify.icons.facebook</v-icon>
           </ShareNetwork>
       </button>
       <button class="share_button">
@@ -19,7 +20,7 @@
               :url="share_link"
               :title="dict_label"
               hashtags="#ordbøkene">
-              <font-awesome-icon :icon="['fab', 'twitter-square']" size="lg" />
+              <v-icon dense>$vuetify.icons.twitter</v-icon>
           </ShareNetwork>
       </button>
   </span>
@@ -67,6 +68,10 @@ export default {
   padding-right: 10px;
 }
 
+.v-icon {
+  color: var(--v-primary-base) !important;
+}
+
 .share_button {
   padding-right: 4px;
   font-weight: bold;

src/main.js

@@ -11,14 +11,6 @@ import VueSocialSharing from 'vue-social-sharing'
 Vue.use(VueSocialSharing);
 
 
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faShareAltSquare } from '@fortawesome/free-solid-svg-icons'
-import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare)
-Vue.component('font-awesome-icon', FontAwesomeIcon);
-
-
 Vue.config.productionTip = false
 Vue.use(VueRouter)
 Vue.use(VuePlausible, {

src/plugins/vuetify.js

 import Vue from 'vue';
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import Vuetify from 'vuetify/lib/framework';
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faShareAltSquare } from '@fortawesome/free-solid-svg-icons'
+import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare)
+Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 Vue.use(Vuetify);
 
+const FONTAWESOME_ICONS = {
+  facebook: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fab", "facebook-square"]
+    }
+  },
+  twitter: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fab", "twitter-square"]
+    }
+  },
+  share: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: "share-alt-square"
+    }
+  }
+}
+
 export default new Vuetify({
   breakpoint: {
     thresholds: {
@@ -34,5 +61,6 @@ export default new Vuetify({
   },
   icons: {
     iconfont: 'md',
+    values: FONTAWESOME_ICONS,
 }
 });