fix: inline svg breaks size #9 vaso2/nuxt-fontawesome

.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: {}
+}

.gitignore

@@ -19,3 +19,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+.nuxt

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false
+}

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;
+}

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>