chore: use svg icons + google fonts

BecauseOfProg · Sep 18, 2023 · ddd9050 · ddd9050
1 parent ac335a2
commit ddd9050
Show file tree

Hide file tree

Showing 24 changed files with 704 additions and 108 deletions.
diff --git a/components/ApplicationDownload.vue b/components/ApplicationDownload.vue
@@ -9,7 +9,7 @@
         color="green darken-1 white--text"
       >
         <v-icon left>
-          mdi-android
+          {{ mdiAndroid }}
         </v-icon>
         {{ $t('application.download.download') }} ≈18Mo
       </v-btn>
@@ -40,6 +40,8 @@
 </template>
 
 <script>
+import { mdiAndroid } from '@mdi/js'
+
 export default {
   name: 'ApplicationDownload',
   data () {
@@ -50,7 +52,8 @@ export default {
         'arm64-v8a',
         'x86',
         'x86_64'
-      ]
+      ],
+      mdiAndroid
     }
   }
 }

diff --git a/components/BReadIndicator.vue b/components/BReadIndicator.vue
@@ -8,7 +8,7 @@
         color="green"
         v-on="on"
       >
-        mdi-eye-check
+        {{ mdiEyeCheck }}
       </v-icon>
     </template>
     <span>{{ $t('publication.wasRead') }}</span>
@@ -17,6 +17,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import { mdiEyeCheck } from '@mdi/js'
 
 export default {
   name: 'BReadIndicator',
@@ -26,6 +27,11 @@ export default {
       required: true
     }
   },
+  data () {
+    return {
+      mdiEyeCheck
+    }
+  },
   computed: {
     ...mapGetters('read-publications', ['isPublicationRead']),
     read () {

diff --git a/components/CategoriesBar.vue b/components/CategoriesBar.vue
@@ -30,7 +30,7 @@
             v-if="value"
             left
           >
-            mdi-chevron-down
+            {{ mdiChevronDown }}
           </v-icon>
           {{ $t(`categories.${category.id}`) }}
         </v-btn>
@@ -83,7 +83,7 @@
               >
                 {{ $t('list.loadMore') }}
                 <v-icon right>
-                  mdi-chevron-right
+                  {{ mdiChevronRight }}
                 </v-icon>
               </v-btn>
             </v-col>
@@ -95,13 +95,16 @@
 </template>
 
 <script>
+import { mdiChevronDown, mdiChevronRight } from '@mdi/js'
 import { categories } from '@/utils/data'
 
 export default {
   data () {
     return {
       categoryPublications: {},
-      categories
+      categories,
+      mdiChevronDown,
+      mdiChevronRight
     }
   },
   async fetch () {

diff --git a/components/CategoriesChips.vue b/components/CategoriesChips.vue
@@ -7,7 +7,7 @@
       active-class="darker white--text"
     >
       <v-icon left>
-        mdi-text-box-multiple-outline
+        {{ mdiTextBoxMultipleOutline }}
       </v-icon>
       {{ $t('global.allPublications') }}
     </v-chip>
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import { mdiTextBoxMultipleOutline } from '@mdi/js'
 import { categories, types } from '@/utils/data'
 
 export default {
@@ -58,7 +59,8 @@ export default {
   data () {
     return {
       categories,
-      types
+      types,
+      mdiTextBoxMultipleOutline
     }
   }
 }

diff --git a/components/ScrollToTop.vue b/components/ScrollToTop.vue
@@ -10,12 +10,14 @@
       right
       @click="$vuetify.goTo('.b-top-banner')"
     >
-      <v-icon>mdi-chevron-up</v-icon>
+      <v-icon>{{ mdiChevronUp }}</v-icon>
     </v-btn>
   </v-scale-transition>
 </template>
 
 <script>
+import { mdiChevronUp } from '@mdi/js'
+
 export default {
   name: 'ScrollToTop',
   props: {
@@ -26,7 +28,8 @@ export default {
   },
   data () {
     return {
-      active: false
+      active: false,
+      mdiChevronUp
     }
   },
   mounted () {

diff --git a/components/ThemeSwitcher.vue b/components/ThemeSwitcher.vue
@@ -9,7 +9,7 @@
             icon
             v-on="{ ...menu, ...tooltip }"
           >
-            <v-icon>mdi-theme-light-dark</v-icon>
+            <v-icon>{{ mdiThemeLightDark }}</v-icon>
           </v-btn>
         </template>
         <span>{{ $t('theme.switchTheme') }}</span>
@@ -18,19 +18,19 @@
     <v-list>
       <v-list-item @click="setTheme('auto')">
         <v-list-item-icon>
-          <v-icon>mdi-theme-light-dark</v-icon>
+          <v-icon>{{ mdiThemeLightDark }}</v-icon>
         </v-list-item-icon>
         <v-list-item-title>{{ $t('theme.auto') }}</v-list-item-title>
       </v-list-item>
       <v-list-item @click="setTheme('light')">
         <v-list-item-icon>
-          <v-icon>mdi-weather-sunny</v-icon>
+          <v-icon>{{ mdiWeatherSunny }}</v-icon>
         </v-list-item-icon>
         <v-list-item-title>{{ $t('theme.light') }}</v-list-item-title>
       </v-list-item>
       <v-list-item @click="setTheme('dark')">
         <v-list-item-icon>
-          <v-icon>mdi-weather-night</v-icon>
+          <v-icon>{{ mdiWeatherNight }}</v-icon>
         </v-list-item-icon>
         <v-list-item-title>{{ $t('theme.dark') }}</v-list-item-title>
       </v-list-item>
@@ -39,8 +39,17 @@
 </template>
 
 <script>
+import { mdiThemeLightDark, mdiWeatherSunny, mdiWeatherNight } from '@mdi/js'
+
 export default {
   name: 'ThemeSwitcher',
+  data () {
+    return {
+      mdiThemeLightDark,
+      mdiWeatherSunny,
+      mdiWeatherNight
+    }
+  },
   mounted () {
     // eslint-disable-next-line nuxt/no-env-in-hooks
     if (process.client) {

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -42,7 +42,7 @@
               icon
               @click="showSearchField = false"
             >
-              <v-icon>mdi-close</v-icon>
+              <v-icon>{{ mdiClose }}</v-icon>
             </v-btn>
           </template>
           <template v-else>
@@ -52,7 +52,7 @@
               to="/blog"
             >
               <v-icon left>
-                mdi-text-box-multiple-outline
+                {{ mdiTextBoxMultipleOutline }}
               </v-icon>
               {{ $t('topBar.publications') }}
             </v-btn>
@@ -62,7 +62,7 @@
               to="/page/projects"
             >
               <v-icon left>
-                mdi-package-variant
+                {{ mdiPackageVariant }}
               </v-icon>
               {{ $t('topBar.projects') }}
             </v-btn>
@@ -74,7 +74,7 @@
                   v-on="on"
                   @click="showSearchField = true"
                 >
-                  <v-icon>mdi-magnify</v-icon>
+                  <v-icon>{{ mdiMagnify }}</v-icon>
                 </v-btn>
               </template>
               <span>{{ $t('topBar.search') }}</span>
@@ -139,6 +139,7 @@
 </template>
 
 <script>
+import { mdiClose, mdiPackageVariant, mdiHomeOutline, mdiMagnify, mdiTextBoxMultipleOutline } from '@mdi/js'
 import { mapMutations, mapState } from 'vuex'
 import ThemeSwitcher from '@/components/ThemeSwitcher.vue'
 
@@ -151,7 +152,12 @@ export default {
       bottomNavigation: '',
 
       showSearchField: false,
-      search: ''
+      search: '',
+
+      mdiClose,
+      mdiTextBoxMultipleOutline,
+      mdiPackageVariant,
+      mdiMagnify
     }
   },
   head () {
@@ -188,22 +194,22 @@ export default {
       return [
         {
           name: 'mobileMenu.home',
-          icon: 'mdi-home-outline',
+          icon: mdiHomeOutline,
           route: 'index'
         },
         {
           name: 'mobileMenu.publications',
-          icon: 'mdi-text-box-multiple-outline',
+          icon: mdiTextBoxMultipleOutline,
           route: 'blog'
         },
         {
           name: 'mobileMenu.search',
-          icon: 'mdi-magnify',
+          icon: mdiMagnify,
           route: 'page-search'
         },
         {
           name: 'mobileMenu.projects',
-          icon: 'mdi-package-variant',
+          icon: mdiPackageVariant,
           route: 'page-projects'
         }
       ]

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -60,9 +60,17 @@ export default {
     // https://github.com/juliomrqz/nuxt-optimized-images
     '@aceforth/nuxt-optimized-images',
     // https://pwa.nuxtjs.org/setup
-    '@nuxtjs/pwa'
+    '@nuxtjs/pwa',
+    // https://google-fonts.nuxtjs.org/getting-started/setup
+    '@nuxtjs/google-fonts'
   ],
 
+  googleFonts: {
+    families: {
+      Roboto: true
+    }
+  },
+
   pwa: {
     meta: {
       name: 'BecauseOfProg',
@@ -111,6 +119,10 @@ export default {
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
     treeShake: true,
+    defaultAssets: false,
+    icons: {
+      iconfont: 'mdiSvg'
+    },
     customVariables: ['~/assets/variables.scss'],
     theme: {
       themes: {