Use tree-shaking when importing FontAwesome icons to decrease bundle …

…size Signed-off-by: Olga Bulat <obulat@gmail.com>
creativecommons · akmadian · Feb 26, 2020 · Feb 25, 2020 · Feb 25, 2020 · Feb 26, 2020
commit c0d1001f68efb9501e6d8bfa1f1144ea2b1e4606
diff --git a/src/components/LicenseIconography.vue b/src/components/LicenseIconography.vue
@@ -15,24 +15,8 @@
 </template>
 
 <script>
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-    faCreativeCommons,
-    faCreativeCommonsBy,
-    faCreativeCommonsNc,
-    faCreativeCommonsNd,
-    faCreativeCommonsSa,
-    faCreativeCommonsZero
-} from '@fortawesome/free-brands-svg-icons/'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-library.add(
-    faCreativeCommons,
-    faCreativeCommonsBy,
-    faCreativeCommonsNc,
-    faCreativeCommonsNd,
-    faCreativeCommonsSa,
-    faCreativeCommonsZero
-)
+
 /**
    * ### License icons are hieroglyphs for the aspects of a license.
    *

diff --git a/src/components/PrintMediaLicenseCode.vue b/src/components/PrintMediaLicenseCode.vue
@@ -8,13 +8,11 @@
                     <LicenseCode ref="licenseCode" attribution-type="print"/>
                 </div>
             </b-tab-item>
-            <b-tab-item icon-pack="fas" icon="copy">
+            <b-tab-item>
                 <template slot="header">
                     <a class="copyBtn"
                         data-clipboard-target="#attribution-plaintext">
-                        <b-icon
-                            icon-pack="fas"
-                            icon="copy"/>
+                        <font-awesome-icon icon="copy" />
                         <span class="button-text">{{ copyText }}</span>
                     </a>
                 </template>
@@ -27,10 +25,12 @@
 import Clipboard from 'clipboard'
 import { mapGetters } from 'vuex'
 import LicenseCode from './LicenseCode'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 export default {
     name: 'PrintMediaLicenseCode',
     components: {
+        FontAwesomeIcon,
         LicenseCode
     },
     props: {
@@ -111,6 +111,9 @@ export default {
 }
 </script>
 <style lang="scss">
+    .copyBtn svg {
+        margin-right: 3px;
+    }
 
     .attribution-tab .photo-license-icon {
         height: 1.4rem;

diff --git a/src/components/WebLicenseCode.vue b/src/components/WebLicenseCode.vue
@@ -17,16 +17,11 @@
                     />
                 </div>
             </b-tab-item>
-            <b-tab-item
-                icon-pack="fas"
-                icon="copy"
-            >
+            <b-tab-item>
                 <template slot="header">
                     <a class="copyBtn"
                         :data-clipboard-target=this.clipboardTarget()>
-                        <b-icon
-                            icon-pack="fas"
-                            icon="copy"/>
+                        <font-awesome-icon icon="copy" />
                         <span class="button-text">{{ copyText }}
                         </span>
                     </a>
@@ -41,10 +36,12 @@ import Clipboard from 'clipboard'
 import { mapGetters } from 'vuex'
 import LicenseCode from './LicenseCode'
 import { generateHTML } from '../utils/license-utilities'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 export default {
     name: 'WebLicenseCode',
     components: {
+        FontAwesomeIcon,
         LicenseCode
     },
     props: {
@@ -140,6 +137,10 @@ export default {
 </script>
 <style lang="scss">
 
+    .copyBtn svg {
+        margin-right: 3px;
+    }
+
     #attribution-richtext>p>span,
     #attribution-richtext .photo-license-icons{
         height: 26px;

diff --git a/src/main.js b/src/main.js
@@ -1,28 +1,33 @@
 import Vue from 'vue'
 import Buefy from 'buefy'
+import 'buefy/dist/buefy.css'
 import i18n from './i18n'
 import VueAnalytics from 'vue-analytics'
 import App from './App.vue'
 import store from './store'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-// internal icons
-import {
-    faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle,
-    faArrowUp, faAngleRight, faAngleLeft, faAngleDown, faUserCircle, faQuestionCircle,
-    faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload, faCopy, faCircle
-} from '@fortawesome/free-solid-svg-icons'
+import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy'
+import { faCreativeCommons } from '@fortawesome/free-brands-svg-icons/faCreativeCommons'
+import { faCreativeCommonsBy } from '@fortawesome/free-brands-svg-icons/faCreativeCommonsBy'
+import { faCreativeCommonsNc } from '@fortawesome/free-brands-svg-icons/faCreativeCommonsNc'
+import { faCreativeCommonsNd } from '@fortawesome/free-brands-svg-icons/faCreativeCommonsNd'
+import { faCreativeCommonsSa } from '@fortawesome/free-brands-svg-icons/faCreativeCommonsSa'
+import { faCreativeCommonsZero } from '@fortawesome/free-brands-svg-icons/faCreativeCommonsZero'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
-library.add(faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle,
-    faArrowUp, faAngleRight, faAngleLeft, faAngleDown, faUserCircle, faQuestionCircle,
-    faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload, faCopy, faCircle)
+library.add(
+    faCopy,
+    faCreativeCommons,
+    faCreativeCommonsBy,
+    faCreativeCommonsNc,
+    faCreativeCommonsNd,
+    faCreativeCommonsSa,
+    faCreativeCommonsZero
+)
 Vue.component('vue-fontawesome', FontAwesomeIcon)
 Vue.config.productionTip = false
-Vue.use(Buefy, {
-    defaultIconComponent: 'vue-fontawesome',
-    defaultIconPack: 'fas'
-})
+Vue.use(Buefy)
+
 if (process.env.NODE_ENV === 'production') {
     Vue.use(VueAnalytics, {
         id: 'UA-2010376-41',