feat: asset optimization

packages/api-client/src/api/storeConfig/storeConfig.ts

@@ -7,6 +7,7 @@ export default gql`
         allow_items,
         allow_order,
         base_currency_code,
+        base_media_url,
         catalog_default_sort_by,
         category_fixed_product_tax_display_setting,
         cms_home_page,

packages/composables/src/getters/storeConfigGetters.ts

@@ -7,6 +7,11 @@ const getCurrency = (config: StoreConfig) => config.default_display_currency_cod
 const getLocale = (config: StoreConfig) => config.locale;
 const allowGuestProductReview = (config: StoreConfig) => config.allow_guests_to_write_product_reviews;
 const enabledWishlist = (config: StoreConfig) => config.magento_wishlist_general_is_enabled;
+const getBaseMediaUrl = (config: StoreConfig) => config.base_media_url;
+const getLogoSrc = (config: StoreConfig) => config.header_logo_src;
+const getLogoWidth = (config: StoreConfig) => config.logo_width;
+const getLogoHeight = (config: StoreConfig) => config.logo_height;
+const getLogoAlt = (config: StoreConfig) => config.logo_alt;
 
 const storeConfigGetters = {
   getCode,
@@ -16,6 +21,11 @@ const storeConfigGetters = {
   getLocale,
   allowGuestProductReview,
   enabledWishlist,
+  getBaseMediaUrl,
+  getLogoSrc,
+  getLogoWidth,
+  getLogoHeight,
+  getLogoAlt,
 };
 
 export default storeConfigGetters;

packages/theme/components/AddToWishlist.vue

@@ -5,12 +5,11 @@
     class="add-to-wishlist"
     @click="$emit('addToWishlist')"
   >
-    <SfIcon
+    <SvgImage
       :icon="isInWishlist ? isInWishlistIcon : wishlistIcon"
-      size="lg"
-      color="green-primary"
-      viewBox="0 0 24 24"
-      :coverage="1"
+      :label="$t('Wishlist')"
+      width="32"
+      height="32"
     />
     <SfButton class="sf-button--text">
       {{ $t(actionText) }}
@@ -20,13 +19,14 @@
 
 <script>
 import { defineComponent, computed } from '@nuxtjs/composition-api';
-import { SfIcon, SfButton } from '@storefront-ui/vue';
+import { SfButton } from '@storefront-ui/vue';
+import SvgImage from '~/components/General/SvgImage.vue';
 
 export default defineComponent({
   name: 'AddToWishlist',
   components: {
-    SfIcon,
     SfButton,
+    SvgImage,
   },
   props: {
     component: {
@@ -64,6 +64,7 @@ export default defineComponent({
 .add-to-wishlist {
   display: flex;
   align-items: center;
+  color: var(--c-primary);
   cursor: pointer;
   margin-top: 1rem;
   margin-bottom: 1rem;

packages/theme/components/AppHeader.vue

@@ -6,18 +6,7 @@
     >
       <!-- TODO: add mobile view buttons after SFUI team PR -->
       <template #logo>
-        <nuxt-link
-          :to="localePath('/')"
-          class="sf-header__logo"
-        >
-          <nuxt-img
-            src="/icons/logo.svg"
-            alt="Vue Storefront Next"
-            class="sf-header__logo-image"
-            width="35"
-            height="34"
-          />
-        </nuxt-link>
+        <HeaderLogo />
       </template>
       <template
         v-if="$device.isDesktop"
@@ -49,9 +38,11 @@
             aria-label="Account"
             @click="handleAccountClick"
           >
-            <SfIcon
+            <SvgImage
               :icon="accountIcon"
-              size="1.25rem"
+              :label="$t('Account')"
+              width="1.25rem"
+              height="1.25rem"
               :class="{
                 'sf-header__icon is-active': activeIcon === 'account',
               }"
@@ -64,12 +55,12 @@
             aria-label="Wishlist"
             @click="toggleWishlistSidebar"
           >
-            <SfIcon
-              class="sf-header__icon"
+            <SvgImage
               :icon="wishlistHasProducts ? 'heart_fill' : 'heart'"
-              :has-badge="wishlistHasProducts"
-              :badge-label="wishlistItemsQty"
-              size="1.25rem"
+              :label="$t('Wishlist')"
+              width="1.25rem"
+              height="1.25rem"
+              class="sf-header__icon"
               :class="{
                 'sf-header__icon is-active': activeIcon === 'wishlist',
               }"
@@ -87,10 +78,12 @@
             aria-label="Toggle cart sidebar"
             @click="toggleCartSidebar"
           >
-            <SfIcon
-              class="sf-header__icon"
+            <SvgImage
               icon="empty_cart"
-              size="1.25rem"
+              :label="$t('Cart')"
+              width="20"
+              height="20"
+              class="sf-header__icon"
               :class="{
                 'sf-header__icon is-active': activeIcon === 'cart',
               }"
@@ -124,7 +117,6 @@
 import {
   SfOverlay,
   SfHeader,
-  SfIcon,
   SfButton,
   SfBadge,
 } from '@storefront-ui/vue';
@@ -148,17 +140,20 @@ import {
   useUiHelpers,
   useUiState,
 } from '~/composables';
-import StoreSwitcher from '~/components/StoreSwitcher.vue';
 import CurrencySelector from '~/components/CurrencySelector.vue';
+import HeaderLogo from '~/components/HeaderLogo.vue';
+import SvgImage from '~/components/General/SvgImage.vue';
+import StoreSwitcher from '~/components/StoreSwitcher.vue';
 
 export default defineComponent({
   components: {
     HeaderNavigationItem,
     SfHeader,
     SfOverlay,
     CurrencySelector,
+    HeaderLogo,
     StoreSwitcher,
-    SfIcon,
+    SvgImage,
     SfButton,
     SfBadge,
     SearchBar: () => import('~/components/Header/SearchBar/SearchBar.vue'),
@@ -230,10 +225,6 @@ export default defineComponent({
   &__switchers {
     display: flex;
   }
-
-  &__logo-image {
-    height: 100%;
-  }
 }
 
 .header-on-top {

packages/theme/components/BottomNavigation.vue

@@ -3,44 +3,70 @@
   <div class="smartphone-only">
     <SfBottomNavigation class="navigation-bottom">
       <SfBottomNavigationItem
-        :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
-        icon="home"
-        size="20px"
+        :class="{ 'sf-bottom-navigation__item--active': $route.name && $route.name.startsWith('home') }"
         label="Home"
         @click="$router.push(app.localePath('/')) && (isMobileMenuOpen ? toggleMobileMenu() : false)"
-      />
+      >
+        <template #icon>
+          <SvgImage
+            icon="home"
+            :label="$t('Home')"
+            width="20"
+            height="20"
+          />
+        </template>
+      </SfBottomNavigationItem>
       <SfBottomNavigationItem
-        icon="menu"
-        size="20px"
         label="Menu"
         @click="toggleMobileMenu"
-      />
+      >
+        <template #icon>
+          <SvgImage
+            icon="menu"
+            :label="$t('Menu')"
+            width="20"
+            height="20"
+          />
+        </template>
+      </SfBottomNavigationItem>
       <SfBottomNavigationItem
         v-if="isAuthenticated"
-        icon="heart"
-        size="20px"
         label="Wishlist"
         @click="toggleWishlistSidebar"
-      />
+      >
+        <template #icon>
+          <SvgImage
+            icon="heart"
+            :label="$t('Wishlist')"
+            width="20"
+            height="20"
+          />
+        </template>
+      </SfBottomNavigationItem>
       <SfBottomNavigationItem
-        icon="profile"
-        size="20px"
         label="Account"
         @click="handleAccountClick"
-      />
-      <!-- TODO: add logic for label - if on Home then Basket, if on PDC then AddToCart etc. -->
+      >
+        <template #icon>
+          <SvgImage
+            icon="profile"
+            :label="$t('Account')"
+            width="20"
+            height="20"
+          />
+        </template>
+      </SfBottomNavigationItem>
       <SfBottomNavigationItem
-        label="Basket"
-        icon="add_to_cart"
+        :label="$route.name && $route.name.startsWith('product') ? 'Add to Cart' : 'Basket'"
         @click="toggleCartSidebar"
       >
         <template #icon>
           <SfCircleIcon aria-label="Add to cart">
-            <SfIcon
+            <SvgImage
               icon="add_to_cart"
-              color="white"
-              size="25px"
-              :style="{margin: '0 0 0 -2px'}"
+              width="25"
+              height="25"
+              class="navigation-bottom__add-to-cart"
             />
           </SfCircleIcon>
         </template>
@@ -51,18 +77,19 @@
 </template>
 
 <script>
-import { SfBottomNavigation, SfIcon, SfCircleIcon } from '@storefront-ui/vue';
+import { SfBottomNavigation, SfCircleIcon } from '@storefront-ui/vue';
 import { useUser } from '@vue-storefront/magento';
 import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
 import { useUiState } from '~/composables';
 import MobileMenuSidebar from '~/components/MobileMenuSidebar.vue';
+import SvgImage from '~/components/General/SvgImage.vue';
 
 export default defineComponent({
   components: {
     SfBottomNavigation,
-    SfIcon,
     SfCircleIcon,
     MobileMenuSidebar,
+    SvgImage,
   },
   setup() {
     const {
@@ -98,5 +125,19 @@ export default defineComponent({
 <style lang="scss" scoped>
 .navigation-bottom {
   --bottom-navigation-z-index: 3;
+
+  &__add-to-cart {
+    margin-left: -2px
+  }
+
+  ::v-deep {
+    .sf-bottom-navigation-item {
+      align-self: end;
+    }
+
+    .svg-image {
+      margin-bottom: var(--spacer-xs);
+    }
+  }
 }
 </style>

packages/theme/components/CartSidebar.vue

@@ -161,12 +161,12 @@
             class="empty-cart"
           >
             <div class="empty-cart__banner">
-              <nuxt-img
-                alt="Empty bag"
-                class="empty-cart__image"
-                src="/icons/empty-cart.svg"
+              <SvgImage
+                icon="empty_cart_image"
+                :label="$t('Empty bag')"
                 width="211"
                 height="143"
+                class="empty-cart__image"
               />
               <SfHeading
                 title="Your cart is empty"
@@ -258,6 +258,7 @@ import _debounce from 'lodash.debounce';
 import { useUiState, useUiNotification } from '~/composables';
 import stockStatusEnum from '~/enums/stockStatusEnum';
 import CouponCode from './CouponCode.vue';
+import SvgImage from '~/components/General/SvgImage.vue';
 
 export default defineComponent({
   name: 'CartSidebar',
@@ -273,6 +274,7 @@ export default defineComponent({
     SfQuantitySelector,
     SfBadge,
     CouponCode,
+    SvgImage,
   },
   setup() {
     const { initializeCheckout } = useExternalCheckout();

packages/theme/components/CurrencySelector.vue

@@ -15,9 +15,7 @@
   </div>
 </template>
 <script>
-import {
-  SfButton,
-} from '@storefront-ui/vue';
+import { SfButton } from '@storefront-ui/vue';
 import {
   ref,
   computed,
@@ -29,8 +27,8 @@ import CurrenciesModal from './CurrencySelector/CurrenciesModal';
 export default defineComponent({
   name: 'CurrencySelector',
   components: {
-    CurrenciesModal,
     SfButton,
+    CurrenciesModal,
   },
   setup() {
     const {