Added FontAwesomeIcon component to load specific SVG

docs/components/SampleCard.vue

@@ -32,6 +32,11 @@
 
 <script>
   import SlideUpDown from 'vue-slide-up-down'
+  import { faCode } from '@fortawesome/free-solid-svg-icons/faCode'
+  import { faPaste } from '@fortawesome/free-solid-svg-icons/faPaste'
+
+  import { library } from '@/components/FontAwesomeIcon'
+  library.add(faCode, faPaste)
 
   export default {
     name: 'SampleCard',

docs/styles/app.scss

@@ -1,4 +1,5 @@
 // Import your library's styles
+@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,700,800|Lato:300,400,400italic,700');
 
 $primary: #c10448;
 $secondary: #003552;

package.json

@@ -21,6 +21,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.1",
+    "@fortawesome/free-brands-svg-icons": "^5.1",
+    "@fortawesome/free-regular-svg-icons": "^5.1.1",
+    "@fortawesome/free-solid-svg-icons": "^5.1",
+    "@fortawesome/vue-fontawesome": "^0.0.22",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.11",
     "es6-symbol": "^3.1.1",

src/components/EmbedForm.vue

@@ -63,10 +63,14 @@
 </template>
 
 <script>
-  import IframeResizer from '../utils/iframe-resizer'
+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'
+  library.add(faClipboard)
+
   Vue.use(VueClipboard)
 
   export default {

src/components/EmbedableFooter.vue

@@ -14,9 +14,14 @@
 </template>
 
 <script>
+  import { faShareAlt } from '@fortawesome/free-solid-svg-icons/faShareAlt'
+
   import IframeResizer from '../utils/iframe-resizer'
   import SharingOptions from './SharingOptions'
   import config from '../config'
+  
+  import { library } from '@/components/FontAwesomeIcon'
+  library.add(faShareAlt)
 
   export default {
     name: 'EmbedableFooter',

src/components/FollowUsPopover.vue

@@ -33,8 +33,15 @@
 </template>
 
 <script>
+  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)
+
   export default {
     name: 'FollowUsPopover',
     components: {

src/components/FontAwesomeIcon.js

@@ -0,0 +1,7 @@
+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()

src/components/SharingOptions.vue

@@ -42,10 +42,19 @@
   import get from 'lodash/get'
   import reduce from 'lodash/reduce'
 
+  import { faCode } from '@fortawesome/free-solid-svg-icons/faCode'
+  import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope'
+  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 EmbedForm from './EmbedForm.vue'
   import config from '../config'
   import IframeResizer from '../utils/iframe-resizer'
 
+  import { library } from '@/components/FontAwesomeIcon'
+  library.add(faCode, faEnvelope, faTwitter, faFacebook, faLinkedin)
+
   export default {
     name: 'SharingOptions',
     components: {

src/main.js

@@ -3,6 +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 GenericFooter from './components/GenericFooter.vue'
 import MainHeader from './components/MainHeader.vue'
 import SharingOptions from './components/SharingOptions.vue'
@@ -15,6 +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 GenericFooter } from './components/GenericFooter.vue'
 export { default as MainHeader } from './components/MainHeader.vue'
 export { default as SharingOptions } from './components/SharingOptions.vue'
@@ -26,6 +28,7 @@ export const components = {
   EmbedableFooter,
   EmbedForm,
   FollowUsPopover,
+  FontAwesomeIcon,
   GenericFooter,
   MainHeader,
   SharingOptions,

src/styles/lib.scss

@@ -1,5 +1,3 @@
-@import url('https://use.fontawesome.com/releases/v5.3.1/css/all.css');
-
 @import './variables.scss';
 @import './mixins.scss';
 @import './functions.scss';

yarn.lock

@@ -577,6 +577,48 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-common-types@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
+
+"@fortawesome/fontawesome-common-types@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.8.tgz#8cacd1efd1aa956e1ef173f0abcf2ce1b7a0c66f"
+
+"@fortawesome/fontawesome-svg-core@^1.2.1":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.8.tgz#b802b7f3d5b9d9d92ae92c18e865df468dcdf561"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.8"
+
+"@fortawesome/fontawesome@^1.1.4":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz#75fe66a60f95508160bb16bd781ad7d89b280f5b"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.7"
+
+"@fortawesome/free-brands-svg-icons@^5.1":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.5.0.tgz#50e020aced5b9652db1d2d9d7909c73561ff1f4a"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.8"
+
+"@fortawesome/free-regular-svg-icons@^5.1.1":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.5.0.tgz#15f59e2727f863acde11b34957d485657638b322"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.8"
+
+"@fortawesome/free-solid-svg-icons@^5.1":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.5.0.tgz#4d815df4bba076f209eb409bc56d9d830367a7c0"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.8"
+
+"@fortawesome/vue-fontawesome@^0.0.22":
+  version "0.0.22"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.0.22.tgz#720457bda0e5866265e5e0f8fe4fbd857fa5653f"
+
 "@intervolga/optimize-cssnano-plugin@^1.0.5":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz#be7c7846128b88f6a9b1d1261a0ad06eb5c0fdf8"