From d7cf6b3718ec771371386b12c16745a8f285006a Mon Sep 17 00:00:00 2001
From: Rohan Verma <hello@rohanverma.net>
Date: Sun, 10 Feb 2019 19:23:45 +0530
Subject: [PATCH] fix: inline svg breaks size #9 vaso2/nuxt-fontawesome

---
 .eslintrc.js               | 21 +++++++++++++++++++++
 .gitignore                 |  2 ++
 .prettierrc                |  9 +++++++++
 assets/css/main.css        |  5 +++++
 components/ProfileList.vue |  8 ++++----
 5 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100755 .eslintrc.js
 create mode 100644 .prettierrc

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100755
index 0000000..f807de9
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {}
+}
diff --git a/.gitignore b/.gitignore
index 185e663..b0d062f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+.nuxt
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..ad1ee79
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index e205e50..8029d70 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -68,3 +68,8 @@ body {
 .btn-indigo:hover {
   @apply bg-indigo text-white;
 }
+
+/* Temporary fix for https://github.com/vaso2/nuxt-fontawesome/issues/9 */
+.fix-fa-inlined span{
+	width: 1em !important;
+}
\ No newline at end of file
diff --git a/components/ProfileList.vue b/components/ProfileList.vue
index 6b12760..9bbda79 100644
--- a/components/ProfileList.vue
+++ b/components/ProfileList.vue
@@ -1,16 +1,16 @@
 <template>
     <div class="w-full leading-normal">
         <div @click="redirect_href('twitter')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
-            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa :icon="faTwitter" /> <span class="pl-2">Twitter</span></p>
+            <p class="font-bold text-lg mb-1 group-hover:text-white fix-fa-inlined"><fa-layers full-width class="fa flex-none align-middle"><fa :icon="faTwitter" /></fa-layers> <span class="pl-2">Twitter</span></p>
         </div>
         <div @click="redirect_href('github')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
-            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa :icon="faGithub" /> <span class="pl-2">Github</span></p>
+            <p class="font-bold text-lg mb-1 group-hover:text-white fix-fa-inlined"><fa-layers full-width class="fa flex-none align-middle"><fa :icon="faGithub" /></fa-layers> <span class="pl-2">Github</span></p>
         </div>
         <div @click="redirect_href('linkedin')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
-            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa :icon="faLinkedin" /> <span class="pl-2">Linkedin</span></p>
+            <p class="font-bold text-lg mb-1 group-hover:text-white fix-fa-inlined"><fa-layers full-width class="fa flex-none align-middle"><fa :icon="faLinkedin" /></fa-layers> <span class="pl-2">Linkedin</span></p>
         </div>
         <div @click="redirect_href('blog')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4">
-            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa :icon="faWordpress" /> <span class="pl-2">Blog</span></p>
+            <p class="font-bold text-lg mb-1 group-hover:text-white fix-fa-inlined"><fa-layers full-width class="fa flex-none align-middle"><fa :icon="faWordpress" /></fa-layers> <span class="pl-2">Blog</span></p>
         </div>
     </div>
 </template>