Remove dom watch for FA

ICIJ · Nov 21, 2018 · 1f8dfa9 · 1f8dfa9
1 parent 8421de3
commit 1f8dfa9
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 29 deletions.
diff --git a/docs/components/SampleCard.vue b/docs/components/SampleCard.vue
@@ -14,12 +14,12 @@
       </slide-up-down>
       <div class="sample-card__body__actions border-top row no-gutters">
         <button class="btn btn-sm font-weight-bold btn-primary col" @click="toggleCode()" :class="{ active: !collapseCode }">
-          <i class="fas fa-code mr-1"></i>
+          <fa icon="code" class="mr-1" />
           <span v-if="collapseCode">Show code</span>
           <span v-if="!collapseCode">Hide code</span>
         </button>
         <button class="btn btn-sm font-weight-bold btn-primary col" @click="$copyText(code)">
-          <i class="fas fa-paste"></i>
+          <fa icon="paste" class="mr-1" />
           Copy
         </button>
       </div>
@@ -35,13 +35,14 @@
   import { faCode } from '@fortawesome/free-solid-svg-icons/faCode'
   import { faPaste } from '@fortawesome/free-solid-svg-icons/faPaste'
 
-  import { library } from '@/components/FontAwesomeIcon'
+  import { library, default as Fa } from '@/components/Fa'
   library.add(faCode, faPaste)
 
   export default {
     name: 'SampleCard',
     components: {
-      SlideUpDown
+      SlideUpDown,
+      Fa
     },
     props: {
       title: {

diff --git a/src/components/EmbedForm.vue b/src/components/EmbedForm.vue
@@ -49,7 +49,7 @@
 
           <div class="text-right">
             <button class="btn btn-link btn-sm text-uppercase font-weight-bold" @click="copyEmbedCode">
-              <i class="fas fa-clipboard"></i>
+              <fa icon="clipboard" />
               Copy
             </button>
           </div>
@@ -63,12 +63,12 @@
 </template>
 
 <script>
-import { faClipboard } from '@fortawesome/free-solid-svg-icons/faClipboard'
+  import { faClipboard } from '@fortawesome/free-solid-svg-icons/faClipboard'
   import VueClipboard from 'vue-clipboard2'
   import Vue from 'vue'
 
   import IframeResizer from '@/utils/iframe-resizer'
-  import { library } from '@/components/FontAwesomeIcon'
+  import { library, default as Fa } from '@/components/Fa'
   library.add(faClipboard)
 
   Vue.use(VueClipboard)
@@ -80,6 +80,9 @@ import { faClipboard } from '@fortawesome/free-solid-svg-icons/faClipboard'
         responsiveCheck: false
       }
     },
+    components: {
+      Fa
+    },
     props: {
       noTitle: {
         type: Boolean

diff --git a/src/components/EmbedableFooter.vue b/src/components/EmbedableFooter.vue
@@ -6,7 +6,7 @@
     </a>
     <div class="embedable-footer__lead small text-truncate" v-html="lead"></div>
     <button class="btn btn-link text-white btn-sm py-0 embedable-footer__share-btn" @click="showShareOptions = !showShareOptions" :class="{ active: showShareOptions }">
-      <i class="fas fa-share-alt"></i>
+      <fa icon="share-alt" />
       <span class="sr-only">Share</span>
     </button>
     <sharing-options :values="sharingOptionsValues" v-if="showShareOptions" direction="column-reverse" :iframe-min-height="iframeMinHeight" :iframe-min-width="iframeMinWidth"></sharing-options>
@@ -19,14 +19,15 @@
   import IframeResizer from '../utils/iframe-resizer'
   import SharingOptions from './SharingOptions'
   import config from '../config'
-  
-  import { library } from '@/components/FontAwesomeIcon'
+
+  import { library, default as Fa } from '@/components/Fa'
   library.add(faShareAlt)
 
   export default {
     name: 'EmbedableFooter',
     components: {
-      SharingOptions,
+      Fa,
+      SharingOptions
     },
     props: {
       title: {

diff --git a/src/components/FontAwesomeIcon.js → src/components/Fa.js b/src/components/FontAwesomeIcon.js → src/components/Fa.js
@@ -1,7 +1,4 @@
 import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
-import { library, dom } from '@fortawesome/fontawesome-svg-core'
 export { library } from '@fortawesome/fontawesome-svg-core'
 
 export default FontAwesomeIcon
-// Kicks off the process of finding <i> tags and replacing with <svg>
-dom.watch()
diff --git a/src/components/FollowUsPopover.vue b/src/components/FollowUsPopover.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="follow-us">
     <button class="btn btn-link text-light follow-us__close" @click="closeSignupPopover">
-      <i class="fas fa-times"></i>
+      <fa icon="times" />
     </button>
     <sign-up-form class="p-3"></sign-up-form>
     <div class="px-3 pb-1 text-uppercase text-muted font-weight-bold">
@@ -11,19 +11,19 @@
       <div class="row">
         <div class="col">
           <a href="https://twitter.com/icijorg" target="_blank" class="d-inline-block text-primary border border-primary rounded-circle bg-white follow-us__social-btn" title="Twitter">
-            <i class="fab fa-twitter"></i>
+            <fa :icon="['fab', 'twitter']" />
             <span class="sr-only">Twitter</span>
           </a>
         </div>
         <div class="col">
           <a href="https://www.facebook.com/ICIJ.org" target="_blank" class="d-inline-block text-primary border border-primary rounded-circle bg-white follow-us__social-btn" title="Facebook">
-            <i class="fab fa-facebook"></i>
+            <fa :icon="['fab', 'facebook']" />
             <span class="sr-only">Facebook</span>
           </a>
         </div>
         <div class="col">
           <a href="https://www.linkedin.com/company/1732242/" target="_blank" class="d-inline-block text-primary border border-primary rounded-circle bg-white follow-us__social-btn" title="Linkedin">
-            <i class="fab fa-linkedin"></i>
+            <fa :icon="['fab', 'linkedin']" />
             <span class="sr-only">Linkedin</span>
           </a>
         </div>
@@ -33,19 +33,21 @@
 </template>
 
 <script>
+  import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
   import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter'
   import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook'
   import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin'
 
   import SignUpForm from './SignUpForm.vue'
 
-  import { library } from '@/components/FontAwesomeIcon'
-  library.add(faTwitter, faFacebook, faLinkedin)
+  import { library, default as Fa } from '@/components/Fa'
+  library.add(faTimes, faTwitter, faFacebook, faLinkedin)
 
   export default {
     name: 'FollowUsPopover',
     components: {
-      SignUpForm,
+      Fa,
+      SignUpForm
     },
     methods: {
       closeSignupPopover() {

diff --git a/src/components/SharingOptions.vue b/src/components/SharingOptions.vue
@@ -2,31 +2,31 @@
   <div class="sharing-options" :style="style">
     <social-sharing v-bind="valuesFor('twitter')" inline-template>
       <network network="twitter" class="sharing-options__link">
-        <i class="fab fa-twitter"></i>
+        <fa :icon="['fab', 'twitter']" />
         <span class="sr-only">Share on Twitter</span>
       </network>
     </social-sharing>
     <social-sharing v-bind="valuesFor('facebook')" inline-template>
       <network network="facebook" class="sharing-options__link">
-        <i class="fab fa-facebook"></i>
+        <fa :icon="['fab', 'facebook']" />
         <span class="sr-only">Share on Facebook</span>
       </network>
     </social-sharing>
     <social-sharing v-bind="valuesFor('linkedin')" inline-template>
       <network network="linkedin" class="sharing-options__link">
-        <i class="fab fa-linkedin"></i>
+        <fa :icon="['fab', 'linkedin']" />
         <span class="sr-only">Share on Linkedin</span>
       </network>
     </social-sharing>
     <social-sharing v-bind="valuesFor('email')" inline-template>
       <network network="email" class="sharing-options__link">
-        <i class="fas fa-envelope"></i>
+        <fa icon="envelope" />
         <span class="sr-only">Share by email</span>
       </network>
     </social-sharing>
     <div class="sharing-options__link" v-show="!noEmbed">
       <a @click="showEmbedForm">
-        <i class="fas fa-code"></i>
+        <fa icon="code" />
         <span class="sr-only">Embed</span>
       </a>
     </div>
@@ -52,14 +52,17 @@
   import config from '../config'
   import IframeResizer from '../utils/iframe-resizer'
 
-  import { library } from '@/components/FontAwesomeIcon'
+  import { library, default as Fa } from '@/components/Fa'
   library.add(faCode, faEnvelope, faTwitter, faFacebook, faLinkedin)
 
+  SocialSharing.components.Fa = Fa
+
   export default {
     name: 'SharingOptions',
     components: {
       bModal,
       EmbedForm,
+      Fa,
       SocialSharing
     },
     props: {

diff --git a/src/main.js b/src/main.js
@@ -3,7 +3,7 @@ import DonateForm from './components/DonateForm.vue'
 import EmbedableFooter from './components/EmbedableFooter.vue'
 import EmbedForm from './components/EmbedForm.vue'
 import FollowUsPopover from './components/FollowUsPopover.vue'
-import FontAwesomeIcon from './components/FontAwesomeIcon'
+import FontAwesomeIcon from './components/Fa'
 import GenericFooter from './components/GenericFooter.vue'
 import MainHeader from './components/MainHeader.vue'
 import SharingOptions from './components/SharingOptions.vue'
@@ -16,7 +16,7 @@ export { default as DonateForm } from './components/DonateForm.vue'
 export { default as EmbedableFooter } from './components/EmbedableFooter.vue'
 export { default as EmbedForm } from './components/EmbedForm.vue'
 export { default as FollowUsPopover } from './components/FollowUsPopover.vue'
-export { default as FontAwesomeIcon } from './components/FontAwesomeIcon'
+export { default as FontAwesomeIcon } from './components/Fa'
 export { default as GenericFooter } from './components/GenericFooter.vue'
 export { default as MainHeader } from './components/MainHeader.vue'
 export { default as SharingOptions } from './components/SharingOptions.vue'