Update to FontAweome 5 (VueJS)

package.json

@@ -27,7 +27,11 @@
     "lint:fix": "eslint --ext .js,.vue src scripts --fix"
   },
   "dependencies": {
-    "font-awesome": "4.7.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.7",
+    "@fortawesome/free-brands-svg-icons": "^5.4.2",
+    "@fortawesome/free-regular-svg-icons": "^5.4.2",
+    "@fortawesome/free-solid-svg-icons": "5.4.2",
+    "@fortawesome/vue-fontawesome": "0.1.2",
     "js-yaml": "3.12.0",
     "material-design-icons": "3.0.1",
     "material-icons": "0.2.3",

resume/data.yml

@@ -68,11 +68,15 @@ projects:
 
 hobbies:
 - name: Video Games
-  iconClass: fa fa-gamepad
+  icon:
+    prefix: 'fa'
+    name: 'gamepad'
   url: https://example.com
 
 - name: Drawing
-  iconClass: fa fa-pencil
+  icon:
+    prefix: 'fa'
+    name: 'pencil-alt'
   url: https://example.com
 
 contributions:
@@ -81,12 +85,14 @@ contributions:
   url: https://github.com/salomonelli/best-resume-ever
 
 contact:
+  city: New York
   email: john.doe@email.com
+  github: johnyD
+  linkedin: johnyD
+  medium: johnyD
   phone: 0123 456789
   street: 1234 Broadway
-  city: New York
   website: johndoe.com
-  github: johnyD
 # en, de, fr, pt, ca, cn, it, es, th, pt-br, ru, sv, id, hu, pl, ja, ka, nl, he, zh-tw, lt, ko, el
 lang: en
 `

src/App.vue

@@ -13,7 +13,6 @@ export default {
 <style>
 /* Add new fonts here */
 @import '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css';
-@import '../node_modules/font-awesome/css/font-awesome.css';
 @import '../node_modules/material-design-icons/iconfont/material-icons.css';
 @import '../node_modules/source-sans-pro/source-sans-pro.css';
 @import '../node_modules/npm-font-open-sans/open-sans.css';

src/main.js

@@ -3,6 +3,9 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 Vue.config.productionTip = false;
 

src/resumes/cool.vue

@@ -65,28 +65,28 @@
               v-if="person.contact.website"
               class="section-link"
               :href="person.contact.website">
-              <i class="section-link__icon fa fa-globe"></i>{{ person.contact.website }}
+              <font-awesome-icon icon="globe-africa" class="section-link__icon"/>{{ person.contact.website }}
             </a>
 
             <a
               v-if="person.contact.linkedin"
               class="section-link"
               :href="'https://linkedin.com/in/' + person.contact.linkedin">
-              <i class="section-link__icon fa fa-linkedin"></i>{{ person.contact.linkedin }}
+              <font-awesome-icon :icon="['fab', 'linkedin']" class="section-link__icon/>{{ person.contact.linkedin }}
             </a>
 
             <a
               v-if="person.contact.github"
               class="section-link"
               :href="'https://github.com/' + person.contact.github">
-              <i class="section-link__icon fa fa-github"></i>{{ person.contact.github }}
+              <font-awesome-icon :icon="['fab', 'github']" class="section-link__icon"/>{{ person.contact.github }}
             </a>
 
             <a
               v-if="person.contact.medium"
               class="section-link"
               :href="'https://medium.com/@' + person.contact.medium">
-              <i class="section-link__icon fa fa-medium"></i>{{ person.contact.medium }}
+              <font-awesome-icon :icon="['fab', 'medium']" class="section-link__icon"/>{{ person.contact.medium }}
             </a>
           </div>
         </div>
@@ -159,7 +159,7 @@
           v-if="person.contributions"
           class="section">
           <div class="section-headline">
-            <i class="section-headline__icon fa fa-heart"></i>{{lang.contributions}}
+            <font-awesome-icon icon="heart" class="section-headline__icon"/>{{lang.contributions}}
           </div>
 
           <div class="section-content-grid">
@@ -187,6 +187,18 @@
 import Vue from 'vue';
 import { getVueOptions } from './options';
 
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+import { faGamepad, faGlobeAfrica, faHeart, faPencilAlt }
+    from '@fortawesome/free-solid-svg-icons';
+
+import { faGithub, faLinkedin, faMedium } from '@fortawesome/free-brands-svg-icons';
+
+library.add(
+    faGamepad, faGithub, faGlobeAfrica,
+    faHeart, faLinkedin, faMedium, faPencilAlt
+);
+
 const name = 'cool';
 
 export default Vue.component(name, getVueOptions(name));

src/resumes/creative.vue

@@ -37,7 +37,7 @@
           :href="person.contact.website">
 
           <div class="block-marged txt-full-white">
-            <i class="fa fa-globe contact-icon"></i>
+            <font-awesome-icon icon="globe-africa" class="contact-icon"/>
             {{ person.contact.website }}
           </div>
         </a>
@@ -46,7 +46,7 @@
           :href="'https://github.com/' + person.contact.github"
           class="external-link">
 
-          <i class="fa fa-github contact-icon"></i>
+          <font-awesome-icon :icon="['fab', 'github']" class="contact-icon"/>
           <span class="block-marged txt-full-white">
             {{ person.contact.github }}
           </span>
@@ -70,10 +70,12 @@
         <a v-if="person.contact.medium"
           :href="'https://medium.com/@' + person.contact.medium"
           class="external-link">
-          <i class="fab fa-medium contact-icon"></i>
+
+          <font-awesome-icon :icon="['fab', 'medium']" class="contact-icon"/>
           <span class="block-marged txt-full-white">
             {{ person.contact.medium }}
           </span>
+
         </a>
       </div>
 
@@ -84,7 +86,7 @@
             class="hobby-item"
             :href="hobby.url">
 
-            <i v-if="hobby.iconClass" :class="hobby.iconClass + ' hobby-item__icon'"></i>
+            <font-awesome-icon v-if="hobby.icon" :icon="[hobby.icon.prefix, hobby.icon.name]" :class="hobby-item__icon"/>
             <span class="hobby-item__icon-label"> {{ hobby.name }} </span>
           </a>
         </div>
@@ -177,7 +179,7 @@
         class="contributions-section section">
 
         <div class="icon">
-          <i class="fa fa-heart font-awesome-icons"></i>
+          <font-awesome-icon icon="heart" class="font-awesome-icons"/>
           <span class="section-headline"> {{lang.contributions}} </span>
         </div>
 
@@ -202,6 +204,18 @@
 import Vue from 'vue';
 import { getVueOptions } from './options';
 
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+import { faGamepad, faGlobeAfrica, faHeart, faPencilAlt }
+    from '@fortawesome/free-solid-svg-icons';
+
+import { faGithub, faMedium } from '@fortawesome/free-brands-svg-icons';
+
+library.add(
+    faGamepad, faGithub, faGlobeAfrica,
+    faHeart, faMedium, faPencilAlt
+);
+
 const name = 'creative';
 
 export default Vue.component(name, getVueOptions(name));

src/resumes/left-right-rtl.vue

@@ -25,23 +25,23 @@
       <h3>{{ lang.contact }}</h3>
       <table>
         <tr>
-          <td><i class="fa fa-envelope" aria-hidden="true"></i></td>
+          <td><font-awesome-icon icon="envelope" aria-hidden="true"/></td>
           <td><a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a></td>
         </tr>
         <tr>
-          <td><i class="fa fa-phone" aria-hidden="true"></i></td>
+          <td><font-awesome-icon icon="phone" aria-hidden="true"/></td>
           <td><a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a></td>
         </tr>
         <tr>
-          <td><i class="fa fa-home" aria-hidden="true"></i></td>
+          <td><font-awesome-icon icon="home" aria-hidden="true"/></td>
           <td>{{person.contact.street}} <br> {{person.contact.city}}</td>
         </tr>
         <tr v-if="person.contact.website">
-          <td><i class="fa fa-globe" aria-hidden="true"></i></td>
+          <td><font-awesome-icon icon="globe-africa" aria-hidden="true"/></td>
           <td><a :href="person.contact.website">{{person.contact.website}}</a></td>
         </tr>
         <tr v-if="person.contact.github">
-          <td><i class="fa fa-github" aria-hidden="true"></i></td>
+          <td><font-awesome-icon :icon="['fab', 'github']" aria-hidden="true"/></td>
           <td><a :href="'https://github.com/'+person.contact.github">https://github.com/{{person.contact.github}}</a></td>
         </tr>
       </table>
@@ -72,6 +72,18 @@
 <script>
 import Vue from 'vue';
 import { getVueOptions } from './options';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+import { faEnvelope, faGlobeAfrica, faHome, faPhone }
+    from '@fortawesome/free-solid-svg-icons';
+
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+
+library.add(
+    faEnvelope, faGithub, faGlobeAfrica, faHome, faPhone
+);
+
 const name = 'left-right-rtl';
 export default Vue.component(name, getVueOptions(name));
 </script>

src/resumes/left-right.vue

@@ -26,23 +26,23 @@
       <table>
         <tr>
           <td><a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a></td>
-          <td><i class="fa fa-envelope" aria-hidden="true"></i></td>
+          <td><font-awesome-icon icon="envelope" aria-hidden="true"/></td>
         </tr>
         <tr>
           <td><a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a></td>
-          <td><i class="fa fa-phone" aria-hidden="true"></i></td>
+          <td><font-awesome-icon icon="phone" aria-hidden="true"/></td>
         </tr>
         <tr>
           <td>{{person.contact.street}} <br> {{person.contact.city}}</td>
-          <td><i class="fa fa-home" aria-hidden="true"></i></td>
+          <td><font-awesome-icon icon="home" aria-hidden="true"/></td>
         </tr>
         <tr v-if="person.contact.website">
           <td><a :href="person.contact.website">{{person.contact.website}}</a></td>
-          <td><i class="fa fa-globe" aria-hidden="true"></i></td>
+          <td><font-awesome-icon icon="globe-africa" aria-hidden="true"/></td>
         </tr>
         <tr v-if="person.contact.github">
           <td><a :href="'https://github.com/'+person.contact.github">https://github.com/{{person.contact.github}}</a></td>
-          <td><i class="fa fa-github" aria-hidden="true"></i></td>
+          <td><font-awesome-icon :icon="['fab', 'github']" aria-hidden="true"/></td>
         </tr>
       </table>
     </div>
@@ -73,6 +73,17 @@
 import Vue from 'vue';
 import { getVueOptions } from './options';
 
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+import { faEnvelope, faGlobeAfrica, faHome, faPhone }
+    from '@fortawesome/free-solid-svg-icons';
+
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+
+library.add(
+    faEnvelope, faGithub, faGlobeAfrica, faHome, faPhone
+);
+
 const name = 'left-right';
 export default Vue.component(name, getVueOptions(name));
 </script>

src/resumes/material-dark.vue

@@ -55,7 +55,7 @@
     <a v-if="person.contact.github" :href="'https://github.com/'+person.contact.github" target="_blank">
       <div class="item">
         <div class="icon">
-          <i class="fa fa-github"></i>
+          <font-awesome-icon :icon="['fab', 'github']" class="fa"/>
         </div>
         <div class="text">
           <span>@{{person.contact.github}}</span>
@@ -126,6 +126,12 @@ import Vue from 'vue';
 import { getVueOptions } from './options';
 const name = 'material-dark';
 
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+
+library.add(faGithub);
+
 export default Vue.component(name, getVueOptions(name));
 </script>
 
@@ -233,6 +239,7 @@ p {
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   font-size:26px;
+  margin: auto;
 }
 h1, h3, h5, h6 {
   font-weight:400;

src/resumes/purple.vue

@@ -6,10 +6,10 @@
             <h1 id="name">{{person.name.first}} {{person.name.last}}</h1>
             <div id="info-flex">
                 <span id="email"><a :href='"mailto:" + person.contact.email'>
-                  <i class="fa fa-envelope" aria-hidden="true"></i> {{person.contact.email}}</a></span>
-                <span id="phone"><i class='fa fa-phone-square' aria-hidden="true"></i> {{person.contact.phone}}</span>
-                <span v-if="person.contact.website" id="website"><a :href='person.contact.website'><i class="fa fa-home" aria-hidden="true"></i> {{person.contact.website}}</a></span>
-                <span v-if="person.contact.github" id="github"><a :href='"https://github.com/" + person.contact.github'><i class="fa fa-github" aria-hidden="true"></i> {{person.contact.github}}</a></span>
+                  <font-awesome-icon icon="envelope" aria-hidden="true"/> {{person.contact.email}}</a></span>
+                <span id="phone"><font-awesome-icon icon="phone-square" aria-hidden="true"/> {{person.contact.phone}}</span>
+                <span v-if="person.contact.website" id="website"><a :href='person.contact.website'><font-awesome-icon icon="home" aria-hidden="true"/> {{person.contact.website}}</a></span>
+                <span v-if="person.contact.github" id="github"><a :href='"https://github.com/" + person.contact.github'><font-awesome-icon :icon="['fab', 'github']" aria-hidden="true"/> {{person.contact.github}}</a></span>
             </div>
         </div>
         <div id="header-right">
@@ -67,6 +67,17 @@
 import Vue from 'vue';
 import { getVueOptions } from './options';
 
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+import { faEnvelope, faGlobeAfrica, faHome, faPhoneSquare }
+    from '@fortawesome/free-solid-svg-icons';
+
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+
+library.add(
+    faEnvelope, faGithub, faGlobeAfrica, faHome, faPhoneSquare
+);
+
 const name = 'purple';
 export default Vue.component(name, getVueOptions(name));
 </script>