From 3dafb71520aacfcf8f720feac59b6c863b2f0938 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20Ste=CC=A8pien=CC=81?= <igor@istepien.dev>
Date: Thu, 28 Sep 2023 23:39:44 +0200
Subject: [PATCH] icons map POC

---
 modules/ps_shoppingcart/ps_shoppingcart.tpl | 23 +++++++-
 src/scss/partials/_fonts.scss               | 13 +++++
 templates/_partials/helpers.tpl             | 63 +++++++++++++++++++++
 3 files changed, 98 insertions(+), 1 deletion(-)

diff --git a/modules/ps_shoppingcart/ps_shoppingcart.tpl b/modules/ps_shoppingcart/ps_shoppingcart.tpl
index 3c793e919..b38716a3e 100644
--- a/modules/ps_shoppingcart/ps_shoppingcart.tpl
+++ b/modules/ps_shoppingcart/ps_shoppingcart.tpl
@@ -10,7 +10,28 @@
       <span class="header-block__action-btn">
     {/if}
 
-    <i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
+    {*
+      OLD ICON
+      <i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
+    *}
+
+    {renderThemeIcon
+      iconName="cart"
+      extraAttributes=[
+        "aria-hidden" => "true",
+        "class" => "header-block__icon"
+      ]
+    }
+
+    {renderThemeIconSvg
+      iconName="cart"
+      extraAttributes=[
+        "aria-hidden" => "true",
+        "viewBox" => "0 -960 960 960",
+        "class" => "header-block__icon"
+      ]
+    }
+
     <span class="d-none d-md-flex header-block__title">{l s='Cart' d='Shop.Theme.Checkout'}</span>
     <span class="header-block__badge">{$cart.products_count}</span>
 
diff --git a/src/scss/partials/_fonts.scss b/src/scss/partials/_fonts.scss
index b405009bc..3c97c3bf8 100644
--- a/src/scss/partials/_fonts.scss
+++ b/src/scss/partials/_fonts.scss
@@ -40,3 +40,16 @@
   /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
 }
+
+/**
+  * Generic svg-icon class that sets basic styles to make icons act like a icon font, but with the benefits of an svg.
+ */
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  display: inline-block;
+  font-size: 24px; // To match the Material Icons font-size POC only
+  overflow: hidden;
+  vertical-align: middle;
+}
diff --git a/templates/_partials/helpers.tpl b/templates/_partials/helpers.tpl
index dd52efe44..8de8fea18 100644
--- a/templates/_partials/helpers.tpl
+++ b/templates/_partials/helpers.tpl
@@ -14,3 +14,66 @@
     >
   </a>
 {/function}
+
+{assign
+  var=iconsMap
+  value=[
+    "cart" => "shopping_cart"
+  ]
+  scope="global"
+}
+
+
+{** SVG SPRITE **}
+
+<svg class="d-none">
+  <defs>
+    <g id="shopping_cart">
+      <path
+        d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM208-800h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Z"/>
+    </g>
+  </defs>
+</svg>
+
+
+{**
+ * @param string iconName
+ * @param array extraAttributes
+ * @return string
+ * @example
+ * {renderIcon name='cart' extraAttributes=['class' => 'my-extra-class']}
+ *}
+{function renderThemeIcon iconName="" extraAttributes=[]}
+    {if $iconName && !empty($iconsMap[$iconName])}
+
+      <span
+        class="material-icons {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
+        {foreach $extraAttributes as $key => $value}
+          {if $key != 'class'}
+            {$key}="{$value}"
+          {/if}
+        {/foreach}
+      >
+        {$iconsMap[$iconName]}
+      </span>
+
+
+    {/if}
+{/function}
+
+{** DIFFERENT NAME ONLY FOR POC TO DISPLAY POSIBILITES **}
+{function renderThemeIconSvg iconName="" extraAttributes=[]}
+  {if $iconName && !empty($iconsMap[$iconName])}
+    <svg
+      class="svg-icon {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
+      {foreach $extraAttributes as $key => $value}
+        {if $key != 'class'}
+          {$key}="{$value}"
+        {/if}
+      {/foreach}
+    >
+      <use xlink:href="#{$iconsMap[$iconName]}"></use>
+    </svg>
+  {/if}
+{/function}
+