optimize build

frontend/assets/css/fontawesome.scss

@@ -2,4 +2,4 @@ $fa-font-path : "../../node_modules/@fortawesome/fontawesome-free/webfonts";
 @import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
 @import '../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
 // @import '../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';
-// @import '../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss';
+// @import '../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss';

frontend/assets/css/main.scss

@@ -1,5 +1,5 @@
-@import './fontawesome.scss';
-@import './materialdesign.scss';
+// @import './fontawesome.scss';
+// @import './materialdesign.scss';
 
 
 .skip-navbar{
@@ -12,4 +12,4 @@
 .fullscreen-div{
   height: 100%;
   width: 100%;
-}
+}

frontend/components/UX/NavbarFooter.vue

@@ -34,9 +34,18 @@
           <span>
             {{ btn.title[locale] }}
           </span>
+
           <v-icon>
             {{ btn.icon }}
           </v-icon>
+
+          <!-- <v-icon>
+            fas fa-th
+          </v-icon> -->
+
+          <!-- <font-awesome-icon :icon="btn.icon" /> -->
+          <!-- <fa icon="th" /> -->
+
         </v-btn>
       </v-bottom-navigation>
     </v-footer>

frontend/nuxt.config.js

@@ -11,7 +11,7 @@ console.log(
   process.env.NUXT_ENV_APP_TITLE
 )
 
-const APP_VERSION = 'v.0.13.linting - linting frontend code'
+const APP_VERSION = 'v.0.14.analyze - analyze build + treeshake icons'
 
 // - - - - - - - - - - - - - - - - - - - - - - - -
 // CONFIGS FROM...
@@ -274,7 +274,10 @@ export default {
         content: process.env.NUXT_ENV_APP_TITLE || 'ODAMAP'
       }
     ],
-    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { href: 'https://use.fontawesome.com/releases/v5.0.13/css/all.css', rel: 'stylesheet' }
+    ]
   },
 
   // for build or dev
@@ -322,6 +325,7 @@ export default {
     { src: '~/plugins/mapbox', mode: 'client' },
     { src: '~/plugins/apexCharts', mode: 'client' },
     { src: '~/plugins/matomo', mode: 'client' }
+    // { src: '~/plugins/icons.js', ssr: false }
   ],
 
   /*
@@ -338,6 +342,7 @@ export default {
     'nuxt-i18n',
     // '~/modules/objectFromPath',
     '@nuxtjs/device'
+
   ],
 
   i18n: {
@@ -373,6 +378,7 @@ export default {
    ** Build configuration
    */
   build: {
+    analyze: true,
     transpile: ['vue-mapbox'],
     // plugins: [
     //   new webpack.ProvidePlugin({

frontend/package.json

@@ -5,6 +5,7 @@
   "author": "Julien_P",
   "private": true,
   "scripts": {
+    "analyze": "nuxt build --analyze",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
     "dev": "nuxt",
@@ -14,6 +15,9 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/vue-fontawesome": "^0.1.9",
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/device": "^1.2.7",
     "@turf/bbox": "^6.0.1",

frontend/plugins/icons.js

@@ -0,0 +1,38 @@
+// ... all fontawesome icons ...
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+import '@fortawesome/fontawesome-free/css/all.min.css'
+Vue.use(Vuetify, {
+  iconfont: 'fa'
+})
+
+/*
+// ... only some icons
+// cf : https://stackoverflow.com/questions/52030435/fontawesome-with-vuetify-how-to-include-font-awesome-icons-within-the-v-icon-c
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
+// import {
+//   faHome,
+//   faMap,
+//   faTh,
+//   faChartBar,
+//   faDatabase
+// } from '@fortawesome/free-solid-svg-icons'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+// library.add(
+//   faHome,
+//   faMap,
+//   faTh,
+//   faChartBar,
+//   faDatabase
+// )
+library.add(fas)
+
+Vue.use(Vuetify, {
+  iconfont: 'faSvg'
+})
+*/