Move SVGs to assets

sections/announcement-bar.liquid

@@ -43,7 +43,7 @@
  <p class="announcement-bar__message h5">
  <span>{{ section.blocks.first.settings.text | escape }}</span>
  {%- if section.blocks.first.settings.link != blank -%}
- {% render 'icon-arrow' %}
+ <img class="icon icon-arrow" src="{{ 'icon-arrow.svg' | asset_url }}">
  {%- endif -%}
  </p>
  {%- if section.blocks.first.settings.link != blank -%}
@@ -66,7 +66,7 @@
  aria-label="{{ 'sections.announcements.previous_announcement' | t }}"
  aria-controls="Slider-{{ section.id }}"
  >
- {% render 'icon-caret' %}
+ <img class="icon icon-caret" src="{{ 'icon-caret.svg' | asset_url }}">
  </button>
  <div
  class="grid grid--1-col slider slider--everywhere"
@@ -102,7 +102,7 @@
  <p class="announcement-bar__message h5">
  <span>{{ block.settings.text | escape }}</span>
  {%- if block.settings.link != blank -%}
- {% render 'icon-arrow' %}
+ <img class="icon icon-arrow" src="{{ 'icon-arrow.svg' | asset_url }}">
  {%- endif -%}
  </p>
  {%- if block.settings.link != blank -%}
@@ -120,7 +120,7 @@
  aria-label="{{ 'sections.announcements.next_announcement' | t }}"
  aria-controls="Slider-{{ section.id }}"
  >
- {% render 'icon-caret' %}
+ <img class="icon icon-caret" src="{{ 'icon-caret.svg' | asset_url }}">
  </button>
  </div>
  </slideshow-component>

sections/cart-icon-bubble.liquid

@@ -1,10 +1,9 @@
-{%- liquid
- if cart == empty
- render 'icon-cart-empty'
- else
- render 'icon-cart'
- endif
--%}
+{%- if cart != empty -%}
+ <img src='{{ 'icon-cart-empty.svg' | asset_url }}'/>
+{%- else -%}
+ <img src='{{ 'icon-cart.svg' | asset_url }}'/>
+{%- endif -%}
+
 <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
 {%- if cart != empty -%}
  <div class="cart-count-bubble">

sections/collage.liquid

@@ -132,7 +132,7 @@
  {% endif %}
  >
  <span class="deferred-media__poster-button motion-reduce">
- {%- render 'icon-play' -%}
+ <img class="icon icon-play" src="{{ 'icon-play.svg' | asset_url }}">
  </span>
 
  {%- if block.settings.cover_image != blank -%}
@@ -176,7 +176,7 @@
  class="modal-video__toggle"
  aria-label="{{ 'accessibility.close' | t }}"
  >
- {% render 'icon-close' %}
+ <img class="icon icon-close" src="{{ 'icon-close.svg' | asset_url }}">
  </button>
  <div class="modal-video__content-info">
  <deferred-media class="modal-video__video template-popup">

sections/collapsible-content.liquid

@@ -85,7 +85,7 @@
  <h3 class="accordion__title inline-richtext h4">
  {{ block.settings.heading | default: block.settings.page.title | escape }}
  </h3>
- {% render 'icon-caret' %}
+ <img class="icon icon-caret" src="{{ 'icon-caret.svg' | asset_url }}">
  </summary>
  <div
  class="accordion__content rte"

sections/collection-list.liquid

@@ -89,7 +89,7 @@
  name="previous"
  aria-label="{{ 'general.slider.previous_slide' | t }}"
  >
- {% render 'icon-caret' %}
+ <img class="icon icon-caret" src="{{ 'icon-caret.svg' | asset_url }}">
  </button>
  <div class="slider-counter caption">
  <span class="slider-counter--current">1</span>
@@ -103,7 +103,7 @@
  name="next"
  aria-label="{{ 'general.slider.next_slide' | t }}"
  >
- {% render 'icon-caret' %}
+ <img class="icon icon-caret" src="{{ 'icon-caret.svg' | asset_url }}">
  </button>
  </div>
  {%- endif -%}

sections/contact-form.liquid

@@ -32,13 +32,13 @@
  {%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
  {%- if form.posted_successfully? -%}
  <h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
- {% render 'icon-success' %}
+ <img class="icon icon-success" src="{{ 'icon-success.svg' | asset_url }}">
  {{ 'templates.contact.form.post_success' | t }}
  </h2>
  {%- elsif form.errors -%}
  <div class="form__message">
  <h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>
- {% render 'icon-error' %}
+ <img class="icon icon-error" src="{{ 'icon-error.svg' | asset_url }}">
  {{ 'templates.contact.form.error_heading' | t }}
  </h2>
  </div>
@@ -89,7 +89,7 @@
  <small class="contact__field-error" id="ContactForm-email-error">
  <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
  <span class="form__message">
- {%- render 'icon-error' -%}
+ <img class="icon icon-error" src="{{ 'icon-error.svg' | asset_url }}">
  {{- form.errors.translated_fields.email | capitalize }}
  {{ form.errors.messages.email -}}
  </span>

sections/email-signup-banner.liquid

@@ -106,12 +106,12 @@
  id="Subscribe"
  aria-label="{{ 'newsletter.button_label' | t }}"
  >
- {% render 'icon-arrow' %}
+ <img class="icon icon-arrow" src="{{ 'icon-arrow.svg' | asset_url }}">
  </button>
  </div>
  {%- if form.errors -%}
  <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
- {%- render 'icon-error' -%}
+ <img class="icon icon-error" src="{{ 'icon-error.svg' | asset_url }}">
  {{- form.errors.translated_fields.email | capitalize }}
  {{ form.errors.messages.email -}}
  </small>
@@ -124,7 +124,7 @@
  tabindex="-1"
  autofocus
  >
- {% render 'icon-success' -%}
+ <img class="icon icon-success" src="{{ 'icon-success.svg' | asset_url }}">
  {{- 'newsletter.success' | t }}
  </h3>
  {%- endif -%}

sections/featured-blog.liquid

@@ -146,7 +146,7 @@
  name="previous"
  aria-label="{{ 'general.slider.previous_slide' | t }}"
  >
- {% render 'icon-caret' %}
+ <img class="icon icon-caret" src="{{ 'icon-caret.svg' | asset_url }}">
  </button>
  <div class="slider-counter caption">
  <span class="slider-counter--current">1</span>
@@ -160,7 +160,7 @@
  name="next"
  aria-label="{{ 'general.slider.next_slide' | t }}"
  >
- {% render 'icon-caret' %}
+ <img class="icon icon-caret" src="{{ 'icon-caret.svg' | asset_url }}">
  </button>
  </div>
  {%- endif -%}

sections/featured-collection.liquid

@@ -155,7 +155,7 @@
  aria-label="{{ 'general.slider.previous_slide' | t }}"
  aria-controls="Slider-{{ section.id }}"
  >
- {% render 'icon-caret' %}
+ <img class="icon icon-caret" src="{{ 'icon-caret.svg' | asset_url }}">
  </button>
  <div class="slider-counter caption">
  <span class="slider-counter--current">1</span>
@@ -170,7 +170,7 @@
  aria-label="{{ 'general.slider.next_slide' | t }}"
  aria-controls="Slider-{{ section.id }}"
  >
- {% render 'icon-caret' %}
+ <img class="icon icon-caret" src="{{ 'icon-caret.svg' | asset_url }}">
  </button>
  </div>
  {%- endif -%}

sections/featured-product.liquid

@@ -189,7 +189,7 @@
  <span class="visually-hidden">
  {{- 'products.product.quantity.decrease' | t: product: product.title | escape -}}
  </span>
- {% render 'icon-minus' %}
+ <img class="icon icon-minus" src="{{ 'icon-minus.svg' | asset_url }}">
  </button>
  <input
  class="quantity__input"
@@ -211,7 +211,7 @@
  <span class="visually-hidden">
  {{- 'products.product.quantity.increase' | t: product: product.title | escape -}}
  </span>
- {% render 'icon-plus' %}
+ <img class="icon icon-plus" src="{{ 'icon-plus.svg' | asset_url }}">
  </button>
  </quantity-input>
  {%- liquid
@@ -441,7 +441,7 @@
  class="link product__view-details animate-arrow"
  >
  {{ 'products.product.view_full_details' | t }}
- {% render 'icon-arrow' %}
+ <img class="icon icon-arrow" src="{{ 'icon-arrow.svg' | asset_url }}">
  </a>
  </section>
  </div>

sections/footer.liquid

@@ -204,12 +204,12 @@
  id="Subscribe"
  aria-label="{{ 'newsletter.button_label' | t }}"
  >
- {% render 'icon-arrow' %}
+ <img class="icon icon-arrow" src="{{ 'icon-arrow.svg' | asset_url }}">
  </button>
  </div>
  {%- if form.errors -%}
  <small class="newsletter-form__message form__message" id="ContactFooter-error">
- {%- render 'icon-error' -%}
+ <img class="icon icon-error" src="{{ 'icon-error.svg' | asset_url }}">
  {{- form.errors.translated_fields.email | capitalize }}
  {{ form.errors.messages.email -}}
  </small>
@@ -222,7 +222,7 @@
  tabindex="-1"
  autofocus
  >
- {% render 'icon-success' -%}
+ <img class="icon icon-success" src="{{ 'icon-success.svg' | asset_url }}">
  {{- 'newsletter.success' | t }}
  </h3>
  {%- endif -%}

sections/header.liquid

@@ -110,7 +110,7 @@
  </symbol>
 
  <symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17">
- <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
+ <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor"/>
  </symbol>
 </svg>
 
@@ -249,11 +249,11 @@
  {%- if customer and customer.has_avatar? -%}
  {{ customer | avatar }}
  {%- else -%}
- {% render 'icon-account' %}
+ <img class="icon icon-account" src="{{ 'icon-account.svg' | asset_url }}">
  {%- endif -%}
  </account-icon>
  {%- else -%}
- {% render 'icon-account' %}
+ <img class="icon icon-account" src="{{ 'icon-account.svg' | asset_url }}">
  {%- endif -%}
  <span class="visually-hidden">
  {%- liquid
@@ -275,13 +275,12 @@
  {%- endfor -%}
 
  <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
- {%- liquid
- if cart == empty
- render 'icon-cart-empty'
- else
- render 'icon-cart'
- endif
- -%}
+
+ {%- if cart != empty -%}
+ <img class="icon icon-cart-empty" src="{{ 'icon-cart-empty.svg' | asset_url }}">
+ {%- else -%}
+ <img class="icon icon-cart" src="{{ 'icon-cart.svg' | asset_url }}">
+ {%- endif -%}
  <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
  {%- if cart != empty -%}
  <div class="cart-count-bubble">