@o2vend/theme-cli 1.0.32

package/test-theme/snippets/delivery-zone-modal.liquid

@@ -0,0 +1,337 @@
+{% comment %}
+  Delivery Zone Selection Modal
+  Supports three modes: Zipcode (with/without search), City, AutoDetect
+{% endcomment %}
+
+<div class="delivery-zone-modal" id="delivery-zone-modal" aria-hidden="true" data-show-modal="{{ deliveryZone.showModal }}">
+  <div class="delivery-zone-overlay" data-zone-overlay></div>
+  <div class="delivery-zone-panel" role="dialog" aria-label="Select delivery location">
+    <header class="delivery-zone-header">
+      <h3 class="delivery-zone-title">Enter pincode for delivery location</h3>
+      <button class="delivery-zone-close" aria-label="Close" data-zone-close>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </header>
+
+    <div class="delivery-zone-content">
+      <form class="delivery-zone-form" id="delivery-zone-form">
+        {% if deliveryZone.mode == 0 %}
+          {% comment %} Zipcode Mode {% endcomment %}
+          {% if deliveryZone.zipcodeSearchEnabled %}
+            {% include 'snippets/delivery-zone-search' %}
+          {% else %}
+            <div class="delivery-zone-input-group">
+              <input 
+                type="text" 
+                id="delivery-zone-zipcode" 
+                name="zipcode" 
+                class="delivery-zone-input"
+                placeholder="Enter Location"
+                value="{{ deliveryZone.defaultZipcode }}"
+                required
+                maxlength="10">
+              <svg class="delivery-zone-search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8"></circle>
+                <path d="m21 21-4.35-4.35"></path>
+              </svg>
+            </div>
+          {% endif %}
+        {% elsif deliveryZone.mode == 1 %}
+          {% comment %} City Mode {% endcomment %}
+          {% include 'snippets/delivery-zone-city-selector' %}
+        {% elsif deliveryZone.mode == 2 %}
+          {% comment %} AutoDetect Mode {% endcomment %}
+          <div class="delivery-zone-autodetect">
+            <button type="button" class="btn btn-primary btn-lg delivery-zone-detect-btn" id="detect-location-btn">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 2v20M2 12h20"/>
+              </svg>
+              Detect My Location
+            </button>
+            <div class="delivery-zone-or-divider">
+              <span>OR</span>
+            </div>
+            <div class="delivery-zone-input-group">
+              <input 
+                type="text" 
+                id="delivery-zone-zipcode" 
+                name="zipcode" 
+                class="delivery-zone-input"
+                placeholder="Enter Location"
+                value="{{ deliveryZone.defaultZipcode }}">
+              <svg class="delivery-zone-search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8"></circle>
+                <path d="m21 21-4.35-4.35"></path>
+              </svg>
+            </div>
+          </div>
+        {% endif %}
+
+        {% if deliveryZone.current %}
+          <div class="delivery-zone-current">
+            <p class="delivery-zone-current-label">Current location:</p>
+            <p class="delivery-zone-current-value">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+                <circle cx="12" cy="10" r="3"></circle>
+              </svg>
+              {{ deliveryZone.current.zoneName }} {{ deliveryZone.current.zipcode }}
+            </p>
+          </div>
+        {% endif %}
+
+        <div class="delivery-zone-error" id="delivery-zone-error" style="display: none;"></div>
+
+        <div class="delivery-zone-actions">
+          <button type="submit" class="btn btn-primary btn-lg delivery-zone-submit">
+            Continue
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <div class="delivery-zone-loading" id="delivery-zone-loading" style="display: none;">
+      <div class="spinner"></div>
+      <p>Loading...</p>
+    </div>
+  </div>
+</div>
+
+<style>
+.delivery-zone-modal { 
+  position: fixed; 
+  inset: 0; 
+  z-index: 9999; 
+  display: none; 
+}
+
+.delivery-zone-modal.active { 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+}
+
+.delivery-zone-overlay { 
+  position: absolute; 
+  inset: 0; 
+  background: rgba(0, 0, 0, 0.5); 
+  backdrop-filter: blur(4px); 
+}
+
+.delivery-zone-panel { 
+  position: relative; 
+  background: white; 
+  border-radius: 16px; 
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); 
+  width: 90%; 
+  max-width: 500px; 
+  max-height: 90vh; 
+  overflow: hidden; 
+  display: flex; 
+  flex-direction: column; 
+}
+
+.delivery-zone-header { 
+  display: flex; 
+  align-items: center; 
+  justify-content: space-between; 
+  padding: 24px; 
+  border-bottom: 1px solid #e5e7eb; 
+}
+
+.delivery-zone-title { 
+  margin: 0; 
+  font-size: 20px; 
+  font-weight: 600; 
+  color: #111827; 
+}
+
+.delivery-zone-close { 
+  background: none; 
+  border: none; 
+  cursor: pointer; 
+  color: #6b7280; 
+  padding: 4px; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+}
+
+.delivery-zone-close:hover { 
+  color: #111827; 
+}
+
+.delivery-zone-content { 
+  padding: 24px; 
+  overflow-y: auto; 
+}
+
+.delivery-zone-form { 
+  display: flex; 
+  flex-direction: column; 
+  gap: 20px; 
+}
+
+.delivery-zone-input-group { 
+  position: relative; 
+  display: flex; 
+  align-items: center; 
+}
+
+.delivery-zone-input { 
+  width: 100%; 
+  padding: 14px 48px 14px 20px; 
+  border: 2px solid #a78bfa; 
+  border-radius: 12px; 
+  font-size: 16px; 
+  transition: all 0.2s ease; 
+  background: white; 
+}
+
+.delivery-zone-input:focus { 
+  outline: none; 
+  border-color: #7c3aed; 
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); 
+}
+
+.delivery-zone-search-icon { 
+  position: absolute; 
+  right: 16px; 
+  color: #a78bfa; 
+  pointer-events: none; 
+}
+
+.delivery-zone-autodetect { 
+  display: flex; 
+  flex-direction: column; 
+  gap: 16px; 
+}
+
+.delivery-zone-detect-btn { 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  gap: 8px; 
+  width: 100%; 
+  padding: 14px; 
+  font-size: 16px; 
+}
+
+.delivery-zone-or-divider { 
+  display: flex; 
+  align-items: center; 
+  gap: 12px; 
+  text-transform: uppercase; 
+  font-size: 12px; 
+  font-weight: 600; 
+  color: #6b7280; 
+  text-align: center; 
+}
+
+.delivery-zone-or-divider::before,
+.delivery-zone-or-divider::after { 
+  content: ''; 
+  flex: 1; 
+  height: 1px; 
+  background: #e5e7eb; 
+}
+
+.delivery-zone-current { 
+  padding: 16px; 
+  background: #f3f4f6; 
+  border-radius: 8px; 
+  display: flex; 
+  flex-direction: column; 
+  gap: 4px; 
+}
+
+.delivery-zone-current-label { 
+  margin: 0; 
+  font-size: 12px; 
+  color: #6b7280; 
+  text-transform: uppercase; 
+  font-weight: 600; 
+}
+
+.delivery-zone-current-value { 
+  margin: 0; 
+  font-size: 14px; 
+  color: #111827; 
+  font-weight: 600; 
+  display: flex; 
+  align-items: center; 
+  gap: 8px; 
+}
+
+.delivery-zone-error { 
+  padding: 12px 16px; 
+  background: #fef2f2; 
+  border: 1px solid #fecaca; 
+  border-radius: 8px; 
+  color: #991b1b; 
+  font-size: 14px; 
+}
+
+.delivery-zone-actions { 
+  display: flex; 
+  gap: 12px; 
+}
+
+.delivery-zone-submit { 
+  flex: 1; 
+  padding: 14px; 
+  font-size: 16px; 
+  font-weight: 600; 
+}
+
+.delivery-zone-loading { 
+  position: absolute; 
+  inset: 0; 
+  background: rgba(255, 255, 255, 0.95); 
+  display: flex; 
+  flex-direction: column; 
+  align-items: center; 
+  justify-content: center; 
+  gap: 16px; 
+}
+
+.spinner { 
+  width: 40px; 
+  height: 40px; 
+  border: 4px solid #e5e7eb; 
+  border-top-color: #a78bfa; 
+  border-radius: 50%; 
+  animation: spin 0.8s linear infinite; 
+}
+
+@keyframes spin { 
+  to { transform: rotate(360deg); } 
+}
+
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .delivery-zone-panel { 
+    width: 100%; 
+    max-width: 100%; 
+    border-radius: 0; 
+    height: 100%; 
+    max-height: 100%; 
+  }
+  
+  .delivery-zone-header { 
+    padding: 16px; 
+  }
+  
+  .delivery-zone-content { 
+    padding: 16px; 
+  }
+  
+  .delivery-zone-title { 
+    font-size: 18px; 
+  }
+}
+</style>
+

package/test-theme/snippets/delivery-zone-search.liquid

@@ -0,0 +1,78 @@
+{% comment %}
+  Delivery Zone Zipcode Search with Autocomplete
+{% endcomment %}
+
+<div class="delivery-zone-search-container">
+  <input 
+    type="text" 
+    id="delivery-zone-zipcode" 
+    name="zipcode" 
+    class="delivery-zone-input"
+    placeholder="Enter Location"
+    value="{{ deliveryZone.defaultZipcode }}"
+    autocomplete="off"
+    required
+    maxlength="10">
+  
+  <div class="delivery-zone-search-results" id="delivery-zone-search-results" style="display: none;"></div>
+</div>
+
+<style>
+.delivery-zone-search-container {
+  position: relative;
+  width: 100%;
+}
+
+.delivery-zone-search-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: white;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 10;
+}
+
+.delivery-zone-search-result {
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.delivery-zone-search-result:last-child {
+  border-bottom: none;
+}
+
+.delivery-zone-search-result:hover {
+  background-color: #f9fafb;
+}
+
+.delivery-zone-search-result.active {
+  background-color: #f3f4f6;
+}
+
+.delivery-zone-result-zipcode {
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 2px;
+}
+
+.delivery-zone-result-details {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.delivery-zone-search-empty {
+  padding: 16px;
+  text-align: center;
+  color: #6b7280;
+  font-size: 14px;
+}
+</style>
+

package/test-theme/snippets/icon.liquid

@@ -0,0 +1,105 @@
+{% comment %}
+  Icon Component - Modern 2026 Theme
+  Supports Heroicons 2.0 outline and solid styles
+  
+  Parameters:
+  - name: Icon name (required) - e.g., 'cart', 'search', 'menu', 'heart'
+  - size: Icon size in pixels or rem (optional, default: 20)
+  - stroke_width: Stroke width (optional, default: 2)
+  - class: Additional CSS classes (optional)
+  - style: Icon style - 'outline' or 'solid' (optional, default: 'outline')
+  - aria_hidden: Hide from screen readers (optional, default: true for decorative icons)
+  - aria_label: Accessible label (optional, required if aria_hidden is false)
+{% endcomment %}
+
+{% assign icon_name = name | default: 'help' | downcase %}
+{% assign icon_size = size | default: 20 %}
+{% assign icon_stroke_width = stroke_width | default: 2 %}
+{% assign icon_style = style | default: 'outline' %}
+{% assign icon_class = class | default: '' %}
+{% assign icon_aria_hidden = aria_hidden | default: true %}
+{% assign icon_aria_label = aria_label | default: '' %}
+
+{% assign size_unit = 'px' %}
+{% if icon_size contains 'rem' or icon_size contains 'em' %}
+  {% assign size_unit = '' %}
+{% endif %}
+
+{% comment %} Icon mapping - Heroicons 2.0 Outline Icons {% endcomment %}
+{% case icon_name %}
+  {% when 'cart', 'shopping-cart', 'shopping-bag' %}
+    {% if icon_style == 'solid' %}
+      {% capture icon_content %}<path fill-rule="evenodd" d="M2.25 2.25a.75.75 0 0 0 0 1.5h1.306c.183 0 .348.1.465.25l1.956 2.692a.75.75 0 0 1-.5 1.108H2.25a.75.75 0 0 0 0 1.5h9.75a.75.75 0 0 0 0-1.5H6.96l-1.456-2.008a.75.75 0 0 1-.465-.25H2.25ZM9 12a3 3 0 1 0 6 0 3 3 0 0 0-6 0Zm-1.5 1.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z" clip-rule="evenodd"/>{% endcapture %}
+    {% else %}
+      {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>{% endcapture %}
+    {% endif %}
+  {% when 'search', 'magnifying-glass' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>{% endcapture %}
+  {% when 'menu', 'bars-3', 'hamburger' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>{% endcapture %}
+  {% when 'x', 'close', 'times' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>{% endcapture %}
+  {% when 'heart', 'favorite', 'wishlist' %}
+    {% if icon_style == 'solid' %}
+      {% capture icon_content %}<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"/>{% endcapture %}
+    {% else %}
+      {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>{% endcapture %}
+    {% endif %}
+  {% when 'user', 'account', 'person' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>{% endcapture %}
+  {% when 'check', 'checkmark', 'tick' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>{% endcapture %}
+  {% when 'arrow-left', 'chevron-left' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/>{% endcapture %}
+  {% when 'arrow-right', 'chevron-right' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>{% endcapture %}
+  {% when 'arrow-up', 'chevron-up' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>{% endcapture %}
+  {% when 'arrow-down', 'chevron-down' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>{% endcapture %}
+  {% when 'star', 'rating' %}
+    {% if icon_style == 'solid' %}
+      {% capture icon_content %}<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"/>{% endcapture %}
+    {% else %}
+      {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>{% endcapture %}
+    {% endif %}
+  {% when 'filter' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"/>{% endcapture %}
+  {% when 'tag', 'price-tag' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.582 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"/>{% endcapture %}
+  {% when 'minus', 'remove' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5"/>{% endcapture %}
+  {% when 'plus', 'add' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>{% endcapture %}
+  {% when 'trash', 'delete' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>{% endcapture %}
+  {% when 'home' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>{% endcapture %}
+  {% when 'loading', 'spinner' %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>{% endcapture %}
+  {% else %}
+    {% comment %} Default help/question mark icon {% endcomment %}
+    {% capture icon_content %}<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"/>{% endcapture %}
+{% endcase %}
+
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  fill="{% if icon_style == 'solid' %}currentColor{% else %}none{% endif %}" 
+  viewBox="0 0 24 24"
+  stroke-width="{{ icon_stroke_width }}"
+  stroke="{% if icon_style == 'solid' %}none{% else %}currentColor{% endif %}"
+  width="{{ icon_size }}{{ size_unit }}"
+  height="{{ icon_size }}{{ size_unit }}"
+  class="icon icon-{{ icon_name }} {{ icon_class }}"
+  {% if icon_aria_hidden %}
+    aria-hidden="true"
+  {% else %}
+    {% if icon_aria_label != blank %}
+      aria-label="{{ icon_aria_label }}"
+      role="img"
+    {% endif %}
+  {% endif %}>
+  {{ icon_content }}
+</svg>
+
+