dev-feature/analyze-bundle (#529)

* add bundle analyzer

* use svg icons - closes #522

* fix recent recipes icon

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/UI/Buttons/TheCopyButton.vue

@@ -20,12 +20,12 @@
         @blur="on.blur"
         retain-focus-on-click
       >
-        <v-icon>mdi-content-copy</v-icon>
+        <v-icon>{{ $globals.icons.contentCopy }}</v-icon>
       </v-btn>
     </template>
     <span>
       <v-icon left dark>
-        mdi-clipboard-check
+        {{ $globals.icons.clipboardCheck }}
       </v-icon>
       <slot> {{ $t("general.copied") }}! </slot>
     </span>

frontend/src/components/UI/Buttons/TheUploadBtn.vue

@@ -3,7 +3,7 @@
     <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
     <slot v-bind="{ isSelecting, onButtonClick }">
       <v-btn :loading="isSelecting" @click="onButtonClick" :small="small" color="accent" :text="textBtn">
-        <v-icon left> {{ icon }}</v-icon>
+        <v-icon left> {{ effIcon }}</v-icon>
         {{ text ? text : defaultText }}
       </v-btn>
     </slot>
@@ -24,7 +24,7 @@ export default {
     },
     url: String,
     text: String,
-    icon: { default: "mdi-cloud-upload" },
+    icon: { default: null },
     fileName: { default: "archive" },
     textBtn: {
       default: true,
@@ -36,6 +36,9 @@ export default {
   }),
 
   computed: {
+    effIcon() {
+      return this.icon ? this.icon : this.$globals.icons.upload;
+    },
     defaultText() {
       return this.$t("general.upload");
     },

frontend/src/components/UI/CardSection.vue

@@ -8,7 +8,7 @@
       <v-spacer></v-spacer>
       <v-btn :icon="$vuetify.breakpoint.xsOnly" text @click="navigateRandom">
         <v-icon :left="!$vuetify.breakpoint.xsOnly">
-          mdi-dice-multiple
+          {{ $globals.icons.diceMultiple }}
         </v-icon>
         {{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
       </v-btn>
@@ -16,7 +16,7 @@
         <template v-slot:activator="{ on, attrs }">
           <v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on" :loading="sortLoading">
             <v-icon :left="!$vuetify.breakpoint.xsOnly">
-              mdi-sort
+              {{ $globals.icons.diceMultiple }}
             </v-icon>
             {{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
           </v-btn>
@@ -24,31 +24,31 @@
         <v-list>
           <v-list-item @click="sortRecipes(EVENTS.az)">
             <v-icon left>
-              mdi-order-alphabetical-ascending
+              {{ $globals.icons.orderAlphabeticalAscending }}
             </v-icon>
             <v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
           </v-list-item>
           <v-list-item @click="sortRecipes(EVENTS.rating)">
             <v-icon left>
-              mdi-star
+              {{ $globals.icons.star }}
             </v-icon>
             <v-list-item-title>{{ $t("general.rating") }}</v-list-item-title>
           </v-list-item>
           <v-list-item @click="sortRecipes(EVENTS.created)">
             <v-icon left>
-              mdi-new-box
+              {{ $globals.icons.newBox }}
             </v-icon>
             <v-list-item-title>{{ $t("general.created") }}</v-list-item-title>
           </v-list-item>
           <v-list-item @click="sortRecipes(EVENTS.updated)">
             <v-icon left>
-              mdi-update
+              {{ $globals.icons.update }}
             </v-icon>
             <v-list-item-title>{{ $t("general.updated") }}</v-list-item-title>
           </v-list-item>
           <v-list-item @click="sortRecipes(EVENTS.shuffle)">
             <v-icon left>
-              mdi-shuffle-variant
+              {{ $globals.icons.shuffleVariant }}
             </v-icon>
             <v-list-item-title>{{ $t("general.shuffle") }}</v-list-item-title>
           </v-list-item>

frontend/src/components/UI/Dialogs/BackupDialog.vue

@@ -2,7 +2,7 @@
   <div>
     <BaseDialog
       :title="$t('settings.backup.create-heading')"
-      titleIcon="mdi-database"
+      :titleIcon="$globals.icons.database"
       @submit="createBackup"
       :submit-text="$t('general.create')"
       :loading="loading"

frontend/src/components/UI/Dialogs/ImportDialog.vue

@@ -2,7 +2,7 @@
   <div class="text-center">
     <BaseDialog
       :title="name"
-      titleIcon="mdi-database"
+      :titleIcon="$globals.icons.database"
       :submit-text="$t('general.import')"
       :loading="loading"
       ref="baseDialog"
@@ -28,7 +28,7 @@
         <TheDownloadBtn :download-url="downloadUrl">
           <template v-slot:default="{ downloadFile }">
             <v-btn class="mr-1" color="info" @click="downloadFile">
-              <v-icon left> mdi-download </v-icon>
+              <v-icon left> {{ $globals.icons.download }}</v-icon>
               {{ $t("general.download") }}
             </v-btn>
           </template>

frontend/src/components/UI/Dialogs/SearchDialog.vue

@@ -26,22 +26,22 @@
             hide-details
             single-line
             :placeholder="$t('search.search')"
-            prepend-inner-icon="mdi-magnify"
+            :prepend-inner-icon="$globals.icons.search"
           >
           </v-text-field>
         </FuseSearchBar>
         <v-btn v-if="isMobile" x-small fab light @click="dialog = false">
           <v-icon>
-            mdi-close
+            {{ $globals.icons.close }}
           </v-icon>
         </v-btn>
       </v-app-bar>
       <v-card class="mt-1 pa-1" relative>
         <v-card-actions>
           <div class="mr-auto">
-            {{ $t('search.results') }}
+            {{ $t("search.results") }}
           </div>
-          <router-link to="/search"> {{ $t('search.advanced-search') }} </router-link>
+          <router-link to="/search"> {{ $t("search.advanced-search") }} </router-link>
         </v-card-actions>
         <v-card-actions v-if="loading">
           <SiteLoader :loading="loading" />

frontend/src/components/UI/GlobalSnackbar.vue

@@ -32,13 +32,13 @@ export default {
     icon() {
       switch (this.snackbar.color) {
         case "error":
-          return "mdi-alert";
+          return this.$globals.icons.alert;
         case "success":
-          return "mdi-checkbox-marked-circle";
+          return this.$globals.icons.checkboxMarkedCircle;
         case "info":
-          return "mdi-information";
+          return this.$globals.icons.information;
         default:
-          return "mdi-bell-alert";
+          return this.$globals.icons.bellAlert;
       }
     },
   },

frontend/src/components/UI/LogCard.vue

@@ -9,7 +9,7 @@
           solo
           :label="$t('about.log-lines')"
           type="number"
-          append-icon="mdi-refresh-circle"
+          :append-icon="$globals.icons.refreshCircle"
           v-model="lines"
           @click:append="getLogText"
           suffix="lines"
@@ -19,7 +19,7 @@
         <TheDownloadBtn :button-text="$t('about.download-log')" download-url="/api/debug/log">
           <template v-slot:default="{ downloadFile }">
             <v-btn bottom right relative fab icon color="primary" @click="downloadFile">
-              <v-icon> mdi-download </v-icon>
+              <v-icon> {{ $globals.icons.download }}</v-icon>
             </v-btn>
           </template>
         </TheDownloadBtn>

frontend/src/components/UI/Search/SearchBar.vue

@@ -18,7 +18,7 @@
       >
         <template #prepend-inner>
           <v-icon color="grey lighten-3" size="29">
-            mdi-magnify
+            {{ $globals.icons.search }}
           </v-icon>
         </template>
       </v-text-field>

frontend/src/components/UI/Search/SearchDialog.vue

@@ -34,7 +34,7 @@
           </div>
         </v-card-text>
         <v-btn v-if="isMobile" fab bottom @click="dialog = false" class="ma-2">
-          <v-icon> mdi-close </v-icon>
+          <v-icon> {{ $globals.icons.close }} </v-icon>
         </v-btn>
       </v-card>
     </v-dialog>

frontend/src/components/UI/TheAppBar.vue

@@ -3,7 +3,7 @@
     <TheSidebar ref="theSidebar" />
     <v-app-bar clipped-left dense app color="primary" dark class="d-print-none" :bottom="isMobile">
       <v-btn icon @click="openSidebar">
-        <v-icon> mdi-menu </v-icon>
+        <v-icon> {{ $globals.icons.menu }}</v-icon>
       </v-btn>
       <router-link to="/">
         <v-btn icon>
@@ -21,7 +21,7 @@
       <v-tooltip bottom>
         <template v-slot:activator="{ on, attrs }">
           <v-btn icon class="mr-1" small v-bind="attrs" v-on="on" @click="isDark = !isDark">
-            <v-icon v-text="isDark ? 'mdi-weather-sunny' : 'mdi-weather-night'"> </v-icon>
+            <v-icon v-text="isDark ? $globals.icons.weatherSunny : $globals.icons.weatherNight"> </v-icon>
           </v-btn>
         </template>
         <span>{{ isDark ? $t("settings.theme.switch-to-light-mode") : $t("settings.theme.switch-to-dark-mode") }}</span>
@@ -31,7 +31,7 @@
       </div>
       <div v-else>
         <v-btn icon @click="$refs.recipeSearch.open()">
-          <v-icon> mdi-magnify </v-icon>
+          <v-icon> {{ $globals.icons.search }} </v-icon>
         </v-btn>
         <SearchDialog ref="recipeSearch" />
       </div>

frontend/src/components/UI/TheRecipeFab.vue

@@ -3,7 +3,7 @@
     <v-dialog v-model="addRecipe" width="650" @click:outside="reset">
       <v-card :loading="processing">
         <v-app-bar dark color="primary mb-2">
-          <v-icon large left v-if="!processing"> mdi-link </v-icon>
+          <v-icon large left v-if="!processing"> {{ $globals.icons.link }} </v-icon>
           <v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
 
           <v-toolbar-title class="headline">
@@ -29,7 +29,7 @@
             <v-expand-transition>
               <v-alert v-if="error" color="error" class="mt-6 white--text">
                 <v-card-title class="ma-0 pa-0">
-                  <v-icon left color="white" x-large> mdi-robot </v-icon>
+                  <v-icon left color="white" x-large> {{ $globals.icons.robot }} </v-icon>
                   {{ $t("new-recipe.error-title") }}
                 </v-card-title>
                 <v-divider class="my-3 mx-2"></v-divider>
@@ -60,7 +60,7 @@
                     :to="{ path: '/recipes/debugger', query: { test_url: recipeURL } }"
                     @click="addRecipe = false"
                   >
-                    <v-icon> mdi-external-link </v-icon>
+                    <v-icon left> {{ $globals.icons.externalLink }} </v-icon>
                     View Scraped Data
                   </v-btn>
                 </div>
@@ -72,7 +72,7 @@
 
           <v-card-actions>
             <v-btn color="grey" text @click="reset">
-              <v-icon left> mdi-close </v-icon>
+              <v-icon left> {{ $globals.icons.close }}</v-icon>
               {{ $t("general.close") }}
             </v-btn>
             <v-spacer></v-spacer>
@@ -93,7 +93,7 @@
       <v-tooltip left dark color="primary">
         <template v-slot:activator="{ on, attrs }">
           <v-btn fab dark small color="primary" v-bind="attrs" v-on="on" @click="addRecipe = true">
-            <v-icon>mdi-link</v-icon>
+            <v-icon>{{ $globals.icons.link }} </v-icon>
           </v-btn>
         </template>
         <span>{{ $t("new-recipe.from-url") }}</span>

frontend/src/components/UI/TheSidebar.vue

@@ -6,10 +6,10 @@
 
         <v-list-item dense v-if="isLoggedIn" :to="`/user/${user.id}/favorites`">
           <v-list-item-icon>
-            <v-icon> mdi-heart </v-icon>
+            <v-icon> {{ $globals.icons.heart }} </v-icon>
           </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title> {{ $t('general.favorites') }} </v-list-item-title>
+            <v-list-item-title> {{ $t("general.favorites") }} </v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </template>
@@ -28,13 +28,13 @@
       <v-list nav dense class="fixedBottom" v-if="!isMain">
         <v-list-item href="https://github.com/sponsors/hay-kot" target="_target">
           <v-list-item-icon>
-            <v-icon color="pink"> mdi-heart </v-icon>
+            <v-icon color="pink"> {{ $globals.icons.heart }} </v-icon>
           </v-list-item-icon>
           <v-list-item-title> {{ $t("about.support") }} </v-list-item-title>
         </v-list-item>
         <v-list-item to="/admin/about">
           <v-list-item-icon class="mr-3 pt-1">
-            <v-icon :color="newVersionAvailable ? 'red--text' : ''"> mdi-information </v-icon>
+            <v-icon :color="newVersionAvailable ? 'red--text' : ''"> {{ $globals.icons.information }} </v-icon>
           </v-list-item-icon>
           <v-list-item-content>
             <v-list-item-title>
@@ -99,17 +99,17 @@ export default {
     baseMainLinks() {
       return [
         {
-          icon: "mdi-home",
+          icon: this.$globals.icons.home,
           to: "/",
           title: this.$t("page.home-page"),
         },
         {
-          icon: "mdi-magnify",
+          icon: this.$globals.icons.search,
           to: "/search",
           title: this.$t("search.search"),
         },
         {
-          icon: "mdi-view-module",
+          icon: this.$globals.icons.viewModule,
           to: "/recipes/all",
           title: this.$t("page.all-recipes"),
         },
@@ -129,7 +129,7 @@ export default {
       const pages = this.$store.getters.getCustomPages;
       if (pages.length > 0) {
         pages.sort((a, b) => a.position - b.position);
-        return pages.map((x) => ({
+        return pages.map(x => ({
           title: x.name,
           to: `/pages/${x.slug}`,
           icon: this.$globals.icons.pages,
@@ -152,17 +152,17 @@ export default {
     adminLinks() {
       return [
         {
-          icon: "mdi-view-dashboard",
+          icon: this.$globals.icons.viewDashboard,
           to: "/admin/dashboard",
           title: this.$t("general.dashboard"),
         },
         {
-          icon: "mdi-cog",
+          icon: this.$globals.icons.cog,
           to: "/admin/settings",
           title: this.$t("settings.site-settings"),
         },
         {
-          icon: "mdi-tools",
+          icon: this.$globals.icons.tools,
           to: "/admin/toolbox",
           title: this.$t("settings.toolbox.toolbox"),
         },
@@ -172,7 +172,7 @@ export default {
           title: this.$t("user.manage-users"),
         },
         {
-          icon: "mdi-database-import",
+          icon: this.$globals.icons.import,
           to: "/admin/migrations",
           title: this.$t("settings.migrations"),
         },

frontend/src/components/UI/TheSiteMenu.vue

@@ -46,37 +46,37 @@ export default {
           login: true,
         },
         {
-          icon: "mdi-calendar-week",
+          icon: this.$globals.icons.calendarWeek,
           title: this.$t("meal-plan.dinner-this-week"),
           nav: "/meal-plan/this-week",
           restricted: true,
         },
         {
-          icon: "mdi-calendar-today",
+          icon: this.$globals.icons.calendarToday,
           title: this.$t("meal-plan.dinner-today"),
           nav: "/meal-plan/today",
           restricted: true,
         },
         {
-          icon: "mdi-calendar-multiselect",
+          icon: this.$globals.icons.calendarMultiselect,
           title: this.$t("meal-plan.planner"),
           nav: "/meal-plan/planner",
           restricted: true,
         },
         {
-          icon: "mdi-format-list-checks",
-          title: this.$t('shopping-list.shopping-lists'),
+          icon: this.$globals.icons.formatListCheck,
+          title: this.$t("shopping-list.shopping-lists"),
           nav: "/shopping-list",
           restricted: true,
         },
         {
-          icon: "mdi-logout",
+          icon: this.$globals.icons.logout,
           title: this.$t("user.logout"),
           restricted: true,
           nav: "/logout",
         },
         {
-          icon: "mdi-cog",
+          icon: this.$globals.icons.cog,
           title: this.$t("general.settings"),
           nav: "/admin",
           restricted: true,