Refactor + Optimize svg files (#3586)

* Change width and height to be handled by parent context

* Optimized SVG files with svgo

Author: tyleralsbury

assets/base.css

@@ -634,6 +634,14 @@ h3 .icon-arrow,
   transform: translateX(-0.05rem);
 }
 
+.svg-wrapper {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+}
+
 /* base-details-summary */
 summary {
   cursor: pointer;
@@ -823,7 +831,7 @@ summary::-webkit-details-marker {
   align-items: center;
 }
 
-.title-wrapper-with-link .link-with-icon svg {
+.title-wrapper-with-link .link-with-icon .svg-wrapper {
   width: 1.5rem;
 }
 
@@ -1464,7 +1472,7 @@ details[open] > .share-button__fallback {
   color: rgba(var(--color-foreground), 0.75);
 }
 
-.share-button__fallback button:hover svg {
+.share-button__fallback button:hover .svg-wrapper {
   transform: scale(1.07);
 }
 
@@ -1662,9 +1670,10 @@ details[open] > .share-button__fallback {
 
 /* Select */
 
-.select .icon-caret,
-.customer select + svg {
+.select .svg-wrapper,
+.customer select + .svg-wrapper {
   height: 0.6rem;
+  width: 1rem;
   pointer-events: none;
   position: absolute;
   top: calc(50% - 0.2rem);
@@ -1769,7 +1778,7 @@ details[open] > .share-button__fallback {
   width: 4.4rem;
 }
 
-.field__button > svg {
+.field__button > .svg-wrapper {
   height: 2.5rem;
   width: 2.5rem;
 }
@@ -1821,21 +1830,21 @@ input[type='checkbox'] {
 }
 
 .form__message .icon,
-.customer .form__message svg {
+.customer .form__message .svg-wrapper {
   flex-shrink: 0;
   height: 1.3rem;
   margin-right: 0.5rem;
   width: 1.3rem;
 }
 
 .form__message--large .icon,
-.customer .form__message svg {
+.customer .form__message .svg-wrapper {
   height: 1.5rem;
   width: 1.5rem;
   margin-right: 1rem;
 }
 
-.customer .field .form__message svg {
+.customer .field .form__message .svg-wrapper {
   align-self: start;
 }
 
@@ -1937,7 +1946,7 @@ input[type='checkbox'] {
   margin-right: calc(var(--inputs-border-width));
 }
 
-.quantity__button svg {
+.quantity__button .svg-wrapper {
   width: 1rem;
   pointer-events: none;
 }
@@ -2515,6 +2524,11 @@ input[type='checkbox'] {
   height: 100%;
 }
 
+.header__icon .svg-wrapper {
+  width: 44px;
+  height: 44px;
+}
+
 .header__icon::after {
   content: none;
 }
@@ -2558,6 +2572,14 @@ input[type='checkbox'] {
   --shop-avatar-size: 2.8rem;
 }
 
+details .header__icon-close {
+  display: none;
+}
+
+details[open] .header__icon-close {
+  display: inline-block;
+}
+
 account-icon {
   display: flex;
 }
@@ -3222,7 +3244,7 @@ details-disclosure > details {
 }
 
 .animate--zoom-in > img,
-.animate--zoom-in > svg {
+.animate--zoom-in > .svg-wrapper {
   transition: scale var(--duration-short) linear;
   scale: var(--zoom-in-ratio);
 }
@@ -3231,7 +3253,7 @@ details-disclosure > details {
 
 @media (prefers-reduced-motion: no-preference) {
   .animate--ambient > img,
-  .animate--ambient > svg {
+  .animate--ambient > .svg-wrapper {
     animation: animateAmbient 30s linear infinite;
   }
 

assets/component-accordion.css

@@ -34,7 +34,7 @@
   word-break: break-word;
 }
 
-.accordion .icon-accordion {
+.accordion .svg-wrapper {
   align-self: center;
   fill: rgb(var(--color-foreground));
   height: calc(var(--font-heading-scale) * 2rem);

assets/component-cart-drawer.css

@@ -99,7 +99,7 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {
   right: 5px;
 }
 
-.drawer__close svg {
+.drawer__close .svg-wrapper {
   height: 2rem;
   width: 2rem;
 }

assets/component-cart-items.css

@@ -190,15 +190,15 @@ cart-remove-button .icon-remove {
   order: 1;
 }
 
-.cart-item__error-text + svg {
+.cart-item__error-text + .svg-wrapper {
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.7rem;
   margin-top: 0.25rem;
 }
 
-.cart-item__error-text:empty + svg {
+.cart-item__error-text:empty + .svg-wrapper {
   display: none;
 }
 

assets/component-discounts.css

@@ -8,7 +8,7 @@
   line-height: calc(1 + 0.5 / var(--font-body-scale));
 }
 
-.discounts__discount svg {
+.discounts__discount .svg-wrapper {
   color: rgba(var(--color-button), var(--alpha-button-background));
 }
 

assets/component-facets.css

@@ -195,6 +195,11 @@
   margin-bottom: 1.5rem;
 }
 
+.facets__summary .svg-wrapper {
+  height: auto;
+  width: auto;
+}
+
 .facets__disclosure fieldset {
   padding: 0;
   margin: 0;
@@ -211,7 +216,7 @@
   animation: animateMenuOpen var(--duration-default) ease;
 }
 
-.facets__summary span {
+.facets__summary span:first-of-type {
   transition: text-decoration var(--duration-short) ease;
 }
 
@@ -498,21 +503,24 @@
   display: flex;
 }
 
-.facet-checkbox > svg {
+.facet-checkbox > svg,
+.facet-checkbox > .svg-wrapper {
   background-color: rgb(var(--color-background));
   margin-right: 1.2rem;
   flex-shrink: 0;
 }
 
-.facet-checkbox .icon-checkmark {
+.facet-checkbox .svg-wrapper {
   visibility: hidden;
   position: absolute;
   left: 0.3rem;
   z-index: 5;
   top: 1.4rem;
+  width: 1.1rem;
+  height: 0.7rem;
 }
 
-.facet-checkbox > input[type='checkbox']:checked ~ .icon-checkmark {
+.facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
   visibility: visible;
 }
 
@@ -522,7 +530,7 @@
     border: 0.1rem solid rgb(var(--color-background));
   }
 
-  .facet-checkbox > input[type='checkbox']:checked ~ .icon-checkmark {
+  .facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
     border: none;
   }
 }
@@ -676,7 +684,7 @@ a.active-facets__button.focused .active-facets__button-inner {
   outline: none;
 }
 
-.active-facets__button svg {
+.active-facets__button .svg-wrapper {
   align-self: center;
   flex-shrink: 0;
   margin-left: 0.6rem;
@@ -686,7 +694,7 @@ a.active-facets__button.focused .active-facets__button-inner {
 }
 
 @media all and (min-width: 990px) {
-  .active-facets__button svg {
+  .active-facets__button .svg-wrapper {
     margin-right: -0.4rem;
     margin-top: 0.1rem;
     width: 1.4rem;
@@ -848,7 +856,7 @@ a.active-facets__button.focused .active-facets__button-inner {
   margin-left: 1rem;
 }
 
-.mobile-facets__open svg {
+.mobile-facets__open .svg-wrapper {
   width: 2rem;
 }
 
@@ -871,7 +879,7 @@ a.active-facets__button.focused .active-facets__button-inner {
   transition: opacity var(--duration-short) ease;
 }
 
-.mobile-facets__close svg {
+.mobile-facets__close .svg-wrapper {
   width: 2.2rem;
 }
 
@@ -880,7 +888,7 @@ details.menu-opening .mobile-facets__close {
   opacity: 1;
 }
 
-details.menu-opening .mobile-facets__close svg {
+details.menu-opening .mobile-facets__close .svg-wrapper {
   margin: 0;
 }
 
@@ -943,7 +951,7 @@ details.menu-opening .mobile-facets__close svg {
   padding: 1.3rem 2.5rem;
 }
 
-.mobile-facets__summary svg {
+.mobile-facets__summary .svg-wrapper {
   margin-left: auto;
 }
 
@@ -1007,7 +1015,7 @@ input.mobile-facets__checkbox {
   display: flex;
 }
 
-.mobile-facets__label > svg {
+.mobile-facets__label > .svg-wrapper {
   background-color: rgb(var(--color-background));
   position: relative;
   z-index: 2;

assets/component-image-with-text.css

@@ -64,7 +64,7 @@
   }
 }
 
-.image-with-text__media--placeholder > svg {
+.image-with-text__media--placeholder > .svg-wrapper {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -74,7 +74,7 @@
   fill: currentColor;
 }
 
-.image-with-text__media--placeholder:is(.animate--ambient, .animate--zoom-in) > svg {
+.image-with-text__media--placeholder:is(.animate--ambient, .animate--zoom-in) > .svg-wrapper {
   top: 0;
   left: 0;
   transform: translate(0);

assets/component-localization-form.css

@@ -176,6 +176,10 @@
   z-index: 6;
 }
 
+.country-filter__input {
+  min-width: 200px;
+}
+
 .country-filter__reset-button,
 .country-filter__search-icon {
   right: calc(var(--inputs-border-width));

assets/component-menu-drawer.css

@@ -203,7 +203,7 @@ details[open].menu-opening > .menu-drawer__submenu {
   margin: 0;
 }
 
-.menu-drawer__account .icon-account {
+.menu-drawer__account account-icon > .svg-wrapper {
   height: 2rem;
   width: 2rem;
   margin-right: 1rem;
@@ -215,7 +215,7 @@ details[open].menu-opening > .menu-drawer__submenu {
   margin-left: -0.45rem;
 }
 
-.menu-drawer__account:hover .icon-account {
+.menu-drawer__account:hover account-icon > .svg-wrapper {
   transform: scale(1.07);
 }
 

assets/component-slideshow.css

@@ -189,7 +189,7 @@ slideshow-component:not(.page-width) .slider-buttons {
   }
 }
 
-.slideshow__autoplay:hover svg {
+.slideshow__autoplay:hover .svg-wrapper {
   transform: scale(1.1);
 }