Client: Header & Menu & Icons (#8770)

* header revamp - wip

* fix webpack fonts

* wip icons

* fix compilation errors

* implement icons loading without iconmoo

* new svg implementation

* wip

* fix issues with svgs

* fix issues with svgs

* fix bits svg

* fix displaying of pet in avatar

* avatar class icon

* no party header

* update navigation

* split code by route

* round gems and gp

* add string for faqs

* fix icons in css

website/client/components/guilds/groupFormModal.vue

@@ -20,7 +20,7 @@
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
           b-tooltip.icon(:content="$t('privateDescription')")
-            img(src='~assets/guilds/information.svg')
+            .svg-icon(v-html='icons.information')
 
         br
         label.custom-control.custom-checkbox
@@ -34,7 +34,7 @@
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('privateGuild') }}
           b-tooltip.icon(:content="$t('privateDescription')")
-            img(src='~assets/guilds/information.svg')
+            .svg-icon(v-html='icons.information')
 
         br
         label.custom-control.custom-checkbox
@@ -72,20 +72,20 @@
 
       .form-group.text-center
         div.item-with-icon
-          img(src="~assets/guilds/green-gem.svg")
+          .svg-icon(v-html="icons.gem")
           span.count 4
         button.btn.btn-primary.btn-md(v-if='!newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('createGuild') }}
         button.btn.btn-primary.btn-md(v-if='newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('updateGuild') }}
         .gem-description(v-once) {{ $t('guildGemCostInfo') }}
 </template>
 
-<style lang="scss" scoped>
-  @import '~client/assets/scss/colors.scss';
-
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
   textarea {
     height: 150px;
   }
-
+
   .description-count, .gem-description {
     font-size: 12px;
     line-height: 1.33;
@@ -175,6 +175,9 @@ import bFormCheckbox from 'bootstrap-vue/lib/components/form-checkbox';
 import bFormSelect from 'bootstrap-vue/lib/components/form-select';
 import bTooltip from 'bootstrap-vue/lib/components/tooltip';
 
+import gemIcon from 'assets/svg/gem.svg';
+import informationIcon from 'assets/svg/information.svg';
+
 export default {
   components: {
     bModal,
@@ -256,6 +259,11 @@ export default {
     });
     data.categoriesHashByKey = hashedCategories;
 
+    data.icons = Object.freeze({
+      gem: gemIcon,
+      information: informationIcon,
+    });
+
     return data;
   },
   mounted () {