From fe6b05016ed96b513e20f31e2321b3f1a08834e5 Mon Sep 17 00:00:00 2001
From: Damien Foulhoux <dfoulhoux@openstudio.fr>
Date: Mon, 9 Sep 2024 16:14:27 +0200
Subject: [PATCH] use symfony ux to display svg icons instead of custom
 function

---
 assets/js/twig/custom-twig.ts                 |  2 +-
 components/Atoms/Form/Checkbox.twig           |  2 +-
 components/Atoms/Form/checkbox.css            |  4 +--
 components/Atoms/Icon/Icon.twig               |  2 +-
 components/Layout/Footer/Footer.twig          | 12 +++----
 components/Layout/Header/Header.twig          | 20 ++++++++---
 components/Layout/Header/HeaderCheckout.twig  |  6 ++--
 .../Layout/Reinsurance/Reinsurance.twig       |  4 ++-
 components/Molecules/Accordion/Accordion.twig | 12 +++++--
 components/Molecules/Button/Button.twig       |  8 +++--
 components/Molecules/Favorite/Favorite.twig   |  4 ++-
 .../Filters/FilterPill/FilterPill.twig        |  4 +--
 .../Filters/FilterSelect/FilterSelect.twig    |  4 +--
 .../Molecules/HeaderButton/HeaderButton.twig  |  2 +-
 .../Molecules/ItemHeader/ItemHeader.twig      |  4 +--
 components/Molecules/Link/Link.twig           |  4 +--
 .../Molecules/Pagination/Pagination.twig      | 12 +++----
 components/Molecules/Score/Score.twig         |  4 +--
 components/Molecules/SearchBar/SearchBar.twig |  2 +-
 components/Molecules/Step/Steps.twig          |  2 +-
 components/Molecules/Tab/Tab.twig             |  4 +--
 components/Molecules/Tag/Tag.twig             |  6 ++--
 components/Molecules/Tooltip/Tooltip.twig     |  4 +--
 components/Molecules/userMenu/UserMenu.twig   |  2 +-
 .../Organisms/Card/Address/AddressCard.twig   |  4 +--
 .../Organisms/Card/Payment/PaymentCard.twig   |  2 +-
 .../Card/PickupPoint/PickupPoint.twig         |  2 +-
 .../Card/PickupPoint/PickupPointDrawer.twig   |  2 +-
 .../Organisms/Card/StoreInfo/StoreInfo.twig   |  2 +-
 .../Modules/HomeDelivery/HomeDelivery.twig    |  2 +-
 .../Organisms/Modules/Payment/Payment.twig    |  2 +-
 .../PickupPointModule/PickupPointModule.twig  |  6 ++--
 .../Modules/StoreDelivery/StoreDelivery.twig  |  4 +--
 .../Organisms/ProductCard/ProductCard.twig    | 16 ++++-----
 .../Organisms/ProductCard/PurchaseFunnel.twig |  2 +-
 .../Organisms/Reinsurance/Reinsurance.twig    |  2 +-
 components/Organisms/SnackBar/SnackBar.twig   |  2 +-
 index.html.twig                               |  2 +-
 product.html.twig                             |  2 +-
 .../Molecules/Filters/FilterPill.tsx          | 35 ++++++++++---------
 src/FlexyBundle.php                           | 17 +++++----
 41 files changed, 131 insertions(+), 103 deletions(-)

diff --git a/assets/js/twig/custom-twig.ts b/assets/js/twig/custom-twig.ts
index e7ae0a4..35ba09f 100644
--- a/assets/js/twig/custom-twig.ts
+++ b/assets/js/twig/custom-twig.ts
@@ -3,7 +3,7 @@ import Twig from 'twig';
 // @ts-ignore
 import IconTwig from './IconTwig.twig';
 
-Twig.extendFunction('svg', (iconName: string): string => {
+Twig.extendFunction('ux_icon', (iconName: string): string => {
   return IconTwig({ icon: iconName });
 });
 
diff --git a/components/Atoms/Form/Checkbox.twig b/components/Atoms/Form/Checkbox.twig
index 35cca99..e6959fe 100644
--- a/components/Atoms/Form/Checkbox.twig
+++ b/components/Atoms/Form/Checkbox.twig
@@ -9,7 +9,7 @@
 <label class="Checkbox {{ classes }} {{ error ? 'error'  : ''}}">
 	<input type="checkbox" name='{{ name }}' value='{{ value }}' {% if disabled %} disabled {% endif %} {% if checked %} checked {% endif %}>
 	<div class="checkmark">
-		<span>{{ svg("checkbox") }}</span>
+    {{ ux_icon('checkbox') }}
 	</div>
   <span class="paragraph-5">{{ label|raw }}</span>
 </label>
diff --git a/components/Atoms/Form/checkbox.css b/components/Atoms/Form/checkbox.css
index cf5ad8f..35ec819 100644
--- a/components/Atoms/Form/checkbox.css
+++ b/components/Atoms/Form/checkbox.css
@@ -27,8 +27,8 @@
     }
   }
   .checkmark {
-    width: 16px;
-    height: 16px;
+    width: 1rem;
+    height: 1rem;
     background: var(--white);
     border: 1px solid var(--current-checkbox-color);
     border-radius: 2px;
diff --git a/components/Atoms/Icon/Icon.twig b/components/Atoms/Icon/Icon.twig
index 08dd691..d525dff 100644
--- a/components/Atoms/Icon/Icon.twig
+++ b/components/Atoms/Icon/Icon.twig
@@ -5,7 +5,7 @@
     {% for icon in line %}
    <div class='flex flex-col items-center {{ color }}'>
      <div class='{{ size }} '>
-       {{ svg(icon) }}
+      {{ ux_icon(icon) }}
      </div>
      <div class='text-xs'>{{ icon }}</div>
    </div>
diff --git a/components/Layout/Footer/Footer.twig b/components/Layout/Footer/Footer.twig
index 7de8944..43491f2 100644
--- a/components/Layout/Footer/Footer.twig
+++ b/components/Layout/Footer/Footer.twig
@@ -41,22 +41,22 @@
   <div class='md:flex md:justify-between md:items-center md:border-t md:border-t-grey-lighter md:px-[50px] md:pt-[30px]'>
     <div class='flex justify-between md:gap-[30px] mb-5 md:mb-0 text-black Footer-socials'>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("instagram") }}
+        {{ ux_icon('instagram') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("pinterest") }}
+        {{ ux_icon('pinterest') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("youtube") }}
+        {{ ux_icon('youtube') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("twitter") }}
+        {{ ux_icon('twitter') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("facebook") }}
+        {{ ux_icon('facebook') }}
       </div>
       <div class='h-7 w-7 md:w-10 md:h-10'>
-        {{ svg("linkedin") }}
+        {{ ux_icon('linkedin') }}
       </div>
     </div>
 
diff --git a/components/Layout/Header/Header.twig b/components/Layout/Header/Header.twig
index dc6f40a..c9d57e6 100644
--- a/components/Layout/Header/Header.twig
+++ b/components/Layout/Header/Header.twig
@@ -10,7 +10,9 @@
 		{% endif %}
 
 		<div class='flex items-center self-center h-full'>
-			<a href="/" class='Header-logo'>{{ svg('thelia') }}</a>
+			<a href="/" class='Header-logo'>
+      {{ ux_icon('thelia') }}
+      </a>
 		</div>
 	</div>
 
@@ -20,8 +22,12 @@
 		</div>
 	{% else %}
 		<nav id="Menu">
-			<button type="button" data-menu-back="-1">{{ svg("arrow-left") }}</button>
-			<button type="button" data-menu-close>{{ svg("close") }}</button>
+			<button type="button" data-menu-back="-1">
+        {{ ux_icon('arrow-left') }}
+      </button>
+			<button type="button" data-menu-close>
+        {{ ux_icon('close') }}
+      </button>
 			<ul class="Header-navigation" data-menu-sub="0">
         {% for category in categories %}
 				  {% include '@components/Molecules/ItemHeader/ItemHeader.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
@@ -34,8 +40,12 @@
 
 	{% if type == "searchbar" %}
 		<nav id="Menu" class='Header-navWrap'>
-			<button type="button" data-menu-back="-1">{{ svg("arrow-left") }}</button>
-			<button type="button" data-menu-close>{{ svg("close") }}</button>
+			<button type="button" data-menu-back="-1">
+        {{ ux_icon('arrow-left') }}
+      </button>
+			<button type="button" data-menu-close>
+        {{ ux_icon('close') }}
+      </button>
 			<ul class="Header-navigation">
         {% for category in categories %}
 				  {% include '@components/Molecules/ItemHeader/ItemHeader.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
diff --git a/components/Layout/Header/HeaderCheckout.twig b/components/Layout/Header/HeaderCheckout.twig
index 94bc817..cb41118 100644
--- a/components/Layout/Header/HeaderCheckout.twig
+++ b/components/Layout/Header/HeaderCheckout.twig
@@ -1,10 +1,12 @@
 {% set classes = classes|default('') %}
 
 <header class='HeaderCheckout flex justify-between items-center {{ classes }} h-12 xl:h-20 px-6  relative'>
-	<div class='xl:mx-auto Header-logo'>{{ svg("thelia") }}</div>
+	<div class='xl:mx-auto Header-logo'>
+    {{ ux_icon('thelia') }}
+  </div>
 	<div class='flex sm:absolute sm:right-6 HeaderCheckout-reassurance top-1/2 sm:-translate-y-1/2  items-center gap-[2px]'>
 		<div class="w-[20px]">
-			{{ svg("lock") }}
+      {{ ux_icon('lock') }}
 		</div>
     <span class="text-grey-dark indication indication-lower">{{ '100% secure'|trans }}</span>
 	</div>
diff --git a/components/Layout/Reinsurance/Reinsurance.twig b/components/Layout/Reinsurance/Reinsurance.twig
index 4adf1f3..52881c7 100644
--- a/components/Layout/Reinsurance/Reinsurance.twig
+++ b/components/Layout/Reinsurance/Reinsurance.twig
@@ -5,7 +5,9 @@
     {% for reinsurance in data %}
       <div>
         {% if reinsurance.icon %}
-          <span class='ReinsuranceModule-icon'>{{ svg(reinsurance.icon) }}</span>
+          <span class='ReinsuranceModule-icon'>
+            {{ux_icon(reinsurance.icon)}}
+          </span>
         {% endif %}
         <div>
           {% if reinsurance.strongText %}
diff --git a/components/Molecules/Accordion/Accordion.twig b/components/Molecules/Accordion/Accordion.twig
index 10b5097..ae86147 100644
--- a/components/Molecules/Accordion/Accordion.twig
+++ b/components/Molecules/Accordion/Accordion.twig
@@ -19,10 +19,16 @@
   <summary class='Accordion-summary'>
     {{ title }}
     {% if variant == 'faq' or (iconPlus and iconMinus) %}
-      <span class='Accordion-icon Accordion-icon--plus'>{{ svg(iconPlus) }}</span>
-      <span class='Accordion-icon Accordion-icon--minus'>{{ svg(iconMinus) }}</span>
+      <span class='Accordion-icon Accordion-icon--plus'>
+        {{ux_icon(iconPlus)}}
+      </span>
+      <span class='Accordion-icon Accordion-icon--minus'>
+        {{ux_icon(iconMinus)}}
+      </span>
     {% else %}
-      <span class='Accordion-icon'>{{ svg("chevron-down") }}</span>
+      <span class='Accordion-icon'>
+        {{ ux_icon('chevron-down') }}
+      </span>
     {% endif %}
   </summary>
   <div class="Accordion-content">
diff --git a/components/Molecules/Button/Button.twig b/components/Molecules/Button/Button.twig
index 91ec1ba..c249f37 100644
--- a/components/Molecules/Button/Button.twig
+++ b/components/Molecules/Button/Button.twig
@@ -22,10 +22,14 @@
 
 <{{ tag }} class='Button {{ classes }}' {% if disabled %}disabled{% endif %} {% if href %}href='{{ href }}'{% else %}type='{{ type }}'{% endif %}>
   {% if icon_left %}
-    <span class='icon icon-left'>{{ svg(icon_left) }}</span>
+    <span class='icon icon-left'>
+      {{ux_icon(icon_left)}}
+    </span>
   {% endif %}
   {{ text|striptags('<span>')|raw }}
   {% if icon_right %}
-    <span class='icon icon-right'>{{ svg(icon_right) }}</span>
+    <span class='icon icon-right'>
+      {{ux_icon(icon_right)}}
+    </span>
   {% endif %}
 </{{ tag }}>
diff --git a/components/Molecules/Favorite/Favorite.twig b/components/Molecules/Favorite/Favorite.twig
index 08bb414..d482be8 100644
--- a/components/Molecules/Favorite/Favorite.twig
+++ b/components/Molecules/Favorite/Favorite.twig
@@ -3,5 +3,7 @@
 
 <button class='Favorite {% if selected %}selected{% endif %}'>
   <span class='text'>{{ text }}</span>
-  <span class='star'>{{ svg("star") }}</span>
+  <span class='star'>
+    {{ ux_icon('star') }}
+  </span>
 </button>
diff --git a/components/Molecules/Filters/FilterPill/FilterPill.twig b/components/Molecules/Filters/FilterPill/FilterPill.twig
index dd635a5..b761095 100644
--- a/components/Molecules/Filters/FilterPill/FilterPill.twig
+++ b/components/Molecules/Filters/FilterPill/FilterPill.twig
@@ -19,10 +19,10 @@
 <label class="FilterPill{{ classes }}">
 	<input type='{{ inputType }}' class='hidden' value='{{ value }}' name='{{ name }}' {% if disabled %} disabled {% endif %}/>
 	{% if icon %}
-		<span class="FilterPill-icon" {% if iconColor %} style="color:{{ iconColor }}" {% endif %}>{{ svg(icon) }}</span>
+		<span class="FilterPill-icon" {% if iconColor %} style="color:{{ iconColor }}" {% endif %}>{{ ux_icon(icon) }}</span>
 	{% endif %}
 	{{ customText }}
 	{% if closeButton %}
-		<span class='FilterPill-iconClose'>{{ svg("close") }}</span>
+		<span class='FilterPill-iconClose'>{{ ux_icon("close") }}</span>
 	{% endif %}
 </label>
diff --git a/components/Molecules/Filters/FilterSelect/FilterSelect.twig b/components/Molecules/Filters/FilterSelect/FilterSelect.twig
index 5884804..2b4941e 100644
--- a/components/Molecules/Filters/FilterSelect/FilterSelect.twig
+++ b/components/Molecules/Filters/FilterSelect/FilterSelect.twig
@@ -16,7 +16,7 @@
         <p class="FilterSelect-text">{{ option.label|raw }}</p>
       </div>
     {% endfor %}
-     <span class='FilterSelect-icon'>{{ svg("chevron-down") }}</span>
+     <span class='FilterSelect-icon'>{{ ux_icon("chevron-down") }}</span>
   </div>
   <ul class="FilterSelect-list">
     {% for option in options %}
@@ -30,7 +30,7 @@
 
 <div class='MobileDrawer FilterSelect-mobileDrawer' id='FilterSelectDrawer-{{ id }}'>
   <div class='MobileDrawer-header'>
-    <button class='MobileDrawer-close' type='button' data-drawer-close>{{ svg("close") }}</button>
+    <button class='MobileDrawer-close' type='button' data-drawer-close>{{ ux_icon("close") }}</button>
   </div>
   <div>
     <ul class="FilterSelect-mobileList">
diff --git a/components/Molecules/HeaderButton/HeaderButton.twig b/components/Molecules/HeaderButton/HeaderButton.twig
index 9f9b30f..dc2b6e4 100644
--- a/components/Molecules/HeaderButton/HeaderButton.twig
+++ b/components/Molecules/HeaderButton/HeaderButton.twig
@@ -8,7 +8,7 @@
 
 <button {% if id %} id="{{id}}" {% endif %} class='HeaderButton {% if inactive %}HeaderButton--inactive{% endif %} {{ classes }} {% if small %}HeaderButton--small{% endif %}'>
   {% if icon %}
-    <span class='HeaderButton-icon'>{{ svg(icon) }}</span>
+    <span class='HeaderButton-icon'>{{ ux_icon(icon) }}</span>
   {% endif %}
 
   <div class='flex flex-col items-start HeaderButton-text'>
diff --git a/components/Molecules/ItemHeader/ItemHeader.twig b/components/Molecules/ItemHeader/ItemHeader.twig
index 3e6763e..74a31d7 100644
--- a/components/Molecules/ItemHeader/ItemHeader.twig
+++ b/components/Molecules/ItemHeader/ItemHeader.twig
@@ -8,11 +8,11 @@
 		{{ customText }}
 	</a>
 	{% if sub %}
-		<button type="button" data-menu-item="{{sub}}">{{ svg("arrow-right") }}</button>
+		<button type="button" data-menu-item="{{sub}}">{{ ux_icon("arrow-right") }}</button>
 		<ul data-menu-sub="{{sub}}" data-menu-previous="0">
 			<li>
 				<a href="#0">Titre sous menu</a>
-				<button type="button" data-menu-item="5">{{ svg("arrow-right") }}</button>
+				<button type="button" data-menu-item="5">{{ ux_icon("arrow-right") }}</button>
 				<ul data-menu-sub="5" data-menu-previous="{{sub}}">
 					<li>
 						<a href="#0">Titre sous sous menu</a>
diff --git a/components/Molecules/Link/Link.twig b/components/Molecules/Link/Link.twig
index d0636d5..1e73545 100644
--- a/components/Molecules/Link/Link.twig
+++ b/components/Molecules/Link/Link.twig
@@ -13,10 +13,10 @@
 
 <a href="{{ href }}" {% if target %} target="{{ target }}" {% endif %} class='Link {{ classes }}' {% if disabled %} disabled {% endif %}>
 	{% if iconLeft %}
-		<span class='Link-icon'>{{ svg(iconLeft) }}</span>
+		<span class='Link-icon'>{{ ux_icon(iconLeft) }}</span>
 	{% endif %}
 	{{ customText }}
 	{% if iconRight %}
-		<span class='Link-icon'>{{ svg(iconRight) }}</span>
+		<span class='Link-icon'>{{ ux_icon(iconRight) }}</span>
 	{% endif %}
 </a>
diff --git a/components/Molecules/Pagination/Pagination.twig b/components/Molecules/Pagination/Pagination.twig
index b2111a2..c36a684 100644
--- a/components/Molecules/Pagination/Pagination.twig
+++ b/components/Molecules/Pagination/Pagination.twig
@@ -5,7 +5,7 @@
 
 
 {# Nombre de pages à afficher de chaque côté de la page actuelle #}
-{% set range = 2 %} 
+{% set range = 2 %}
 
 {% if totalPages > 1 %}
   <nav class="Pagination">
@@ -13,7 +13,7 @@
       {% if currentPage != 1 %}
         <li class="Pagination-listItemPrev">
           <a href="?page={{ currentPage - 1 }}" class="Pagination-item Pagination-item--isPrev">
-            <span class='Pagination-icon'>{{ svg("chevron-left") }}</span>
+            <span class='Pagination-icon'>{{ ux_icon("chevron-left") }}</span>
             <span class='Pagination-text'>{{ prevText }}</span>
           </a>
         </li>
@@ -24,11 +24,11 @@
           <a href="?page=1" class="Pagination-item">1</a>
         </li>
       {% endif %}
-        
+
       {% if currentPage > range + 1 %}
         <li><span class="Pagination-item">...</span></li>
       {% endif %}
-        
+
       {% for page in 1..totalPages %}
         {% if page == currentPage %}
           <li><span class="Pagination-item Pagination-item--active">{{ page }}</span></li>
@@ -36,7 +36,7 @@
           <li><a href="?page={{ page }}" class="Pagination-item">{{ page }}</a></li>
         {% endif %}
       {% endfor %}
-        
+
       {% if totalPages > currentPage + range %}
         <li><span class="Pagination-item">...</span></li>
       {% endif %}
@@ -51,7 +51,7 @@
         <li class="Pagination-listItemNext">
           <a href="?page={{ currentPage + 1 }}" class="Pagination-item Pagination-item--isNext">
             <span class='Pagination-text'>{{ nextText }}</span>
-            <span class='Pagination-icon'>{{ svg("chevron-right") }}</span>
+            <span class='Pagination-icon'>{{ ux_icon("chevron-right") }}</span>
           </a>
         </li>
       {% endif %}
diff --git a/components/Molecules/Score/Score.twig b/components/Molecules/Score/Score.twig
index ddbcdca..7d062d4 100644
--- a/components/Molecules/Score/Score.twig
+++ b/components/Molecules/Score/Score.twig
@@ -3,11 +3,11 @@
 
 <div class="Score">
   {% for star in 1..score %}
-    <span class="Score-star">{{ svg("star") }}</span>
+    <span class="Score-star">{{ ux_icon("star") }}</span>
   {% endfor %}
   {% if score < maxScore %}
     {% for star in 1..(maxScore - score) %}
-      <span class="Score-star Score-star--empty">{{ svg("star") }}</span>
+      <span class="Score-star Score-star--empty">{{ ux_icon("star") }}</span>
     {% endfor %}
   {% endif %}
 </div>
diff --git a/components/Molecules/SearchBar/SearchBar.twig b/components/Molecules/SearchBar/SearchBar.twig
index 145fc2d..4dbdc70 100644
--- a/components/Molecules/SearchBar/SearchBar.twig
+++ b/components/Molecules/SearchBar/SearchBar.twig
@@ -5,6 +5,6 @@
 {% if type != 'classic' %}{% set classes = classes ~ ' SearchBar--' ~ type %}{% endif %}
 
 <label class="SearchBar {{ classes }}" aria-label={{"Search"|trans}}>
-	<button class='w-4 h-4'>{{ svg("search") }}</button>
+	<button class='w-4 h-4'>{{ ux_icon("search") }}</button>
 	<input type="text" name="query" placeholder={{"e.g. Shoes, T-shirts, ..."|trans}} autocomplete='off' value="{{ value }}"/>
 </label>
diff --git a/components/Molecules/Step/Steps.twig b/components/Molecules/Step/Steps.twig
index 82f8433..065a0ee 100644
--- a/components/Molecules/Step/Steps.twig
+++ b/components/Molecules/Step/Steps.twig
@@ -12,7 +12,7 @@
       class="CheckoutSteps-stepBack"
       {# onClick={() => changeStep(currentStep - 1)} #}
     >
-      <span>{{ svg("chevron-left") }}</span>
+      <span>{{ ux_icon("chevron-left") }}</span>
     </div>
     <div class="StepProgressBar">
       <div
diff --git a/components/Molecules/Tab/Tab.twig b/components/Molecules/Tab/Tab.twig
index 48f3903..7f2318b 100644
--- a/components/Molecules/Tab/Tab.twig
+++ b/components/Molecules/Tab/Tab.twig
@@ -11,10 +11,10 @@
 
 <button class='Tab {{ classes }}' {% if disabled %}disabled{% endif %}>
   {% if iconLeft %}
-    <span class='Tab-icon'>{{ svg(iconLeft) }}</span>
+    <span class='Tab-icon'>{{ ux_icon(iconLeft) }}</span>
   {% endif %}
   {{ customText }}
   {% if iconRight %}
-    <span class='Tab-icon'>{{ svg(iconRight) }}</span>
+    <span class='Tab-icon'>{{ ux_icon(iconRight) }}</span>
   {% endif %}
 </button>
diff --git a/components/Molecules/Tag/Tag.twig b/components/Molecules/Tag/Tag.twig
index aae23e6..4f9ac29 100644
--- a/components/Molecules/Tag/Tag.twig
+++ b/components/Molecules/Tag/Tag.twig
@@ -16,18 +16,18 @@
 {% if not closeOnClick and not href and not onClick %}
 	<span class="Tag{{ classes }}">
 		{% if icon %}
-      <span class="Tag-icon">{{ svg(icon) }}</span>
+      <span class="Tag-icon">{{ ux_icon(icon) }}</span>
 		{% endif %}
 		{{ customText }}
 	</span>
 {% else %}
 	<button class="Tag{{ classes }} Tag--action" {% if href %} href="{{ href }}" {% endif %} {% if onClick %} onclick="onClick" {% endif %}>
 		{% if icon %}
-			<span class="Tag-icon">{{ svg(icon) }}</span>
+			<span class="Tag-icon">{{ ux_icon(icon) }}</span>
 		{% endif %}
 		{{ customText }}
 		{% if closeOnClick %}
-			<span class='Tag-iconClose'>{{ svg("close") }}</span>
+			<span class='Tag-iconClose'>{{ ux_icon("close") }}</span>
 		{% endif %}
 	</button>
 {% endif %}
diff --git a/components/Molecules/Tooltip/Tooltip.twig b/components/Molecules/Tooltip/Tooltip.twig
index c1eebe3..a4f86b3 100644
--- a/components/Molecules/Tooltip/Tooltip.twig
+++ b/components/Molecules/Tooltip/Tooltip.twig
@@ -5,9 +5,9 @@
 {% set classes = classes ~ ' Tooltip-text--' ~ position %}
 
 <div class='Tooltip'>
-  <span class='Tooltip-icon'>{{ svg("help") }}</span>
+  <span class='Tooltip-icon'>{{ ux_icon("help") }}</span>
   <span class='Tooltip-text{{ classes }}'>
-    <span class='Tooltip-close'>{{ svg("close") }}</span>
+    <span class='Tooltip-close'>{{ ux_icon("close") }}</span>
     {{ tooltip }}
   </span>
 </div>
diff --git a/components/Molecules/userMenu/UserMenu.twig b/components/Molecules/userMenu/UserMenu.twig
index 790dfdf..719f5fe 100644
--- a/components/Molecules/userMenu/UserMenu.twig
+++ b/components/Molecules/userMenu/UserMenu.twig
@@ -12,6 +12,6 @@
 <a href="{{ href }}" class='UserMenu {{ classes }}'>
   {{ customText }}
   {% if icon %}
-    <span class='UserMenu-icon'>{{ svg("chevron-right") }}</span>
+    <span class='UserMenu-icon'>{{ ux_icon("chevron-right") }}</span>
   {% endif %}
 </a>
diff --git a/components/Organisms/Card/Address/AddressCard.twig b/components/Organisms/Card/Address/AddressCard.twig
index cd6bc2f..709efe8 100644
--- a/components/Organisms/Card/Address/AddressCard.twig
+++ b/components/Organisms/Card/Address/AddressCard.twig
@@ -43,11 +43,11 @@
   {% if not purchaseFunnel %}
     <div class="bottom-card-buttons">
       <button {% if disabled %}disabled{% endif %} class='hover:text-theme' type='button'>
-        <span>{{ svg("edit") }}</span>
+        <span>{{ ux_icon("edit") }}</span>
         {{ 'Modify'|trans }}
       </button>
       <button {% if disabled %}disabled{% endif %} class='hover:text-theme' type='button'>
-        <span>{{ svg("delete") }}</span>
+        <span>{{ ux_icon("delete") }}</span>
         {{ 'Delete'|trans }}
       </button>
     </div>
diff --git a/components/Organisms/Card/Payment/PaymentCard.twig b/components/Organisms/Card/Payment/PaymentCard.twig
index 2d7a4cc..fa2ccab 100644
--- a/components/Organisms/Card/Payment/PaymentCard.twig
+++ b/components/Organisms/Card/Payment/PaymentCard.twig
@@ -6,7 +6,7 @@
 {% set date = date|default('') %}
 
 <div class='PaymentCard'>
-  <div class='PaymentCard-icon'><span>{{ svg("calendar") }}</span></div>
+  <div class='PaymentCard-icon'><span>{{ ux_icon("calendar") }}</span></div>
   <div class='PaymentCard-title'>{{ title }}</div>
   <div class='{% if not expired %}flex flex-cols items-end justify-between {% endif %}'>
     <div class='PaymentCard-content'>
diff --git a/components/Organisms/Card/PickupPoint/PickupPoint.twig b/components/Organisms/Card/PickupPoint/PickupPoint.twig
index 3223895..78ecfc0 100644
--- a/components/Organisms/Card/PickupPoint/PickupPoint.twig
+++ b/components/Organisms/Card/PickupPoint/PickupPoint.twig
@@ -29,7 +29,7 @@
     </span>
   </label>
   <div class='PickupPoint-bottom'>
-          <button class='PickupPoint-hours underline-with-icon' type='button'>{{ svg("clock") }}{{ 'Opening hours'|trans }}</button>
+          <button class='PickupPoint-hours underline-with-icon' type='button'>{{ ux_icon("clock") }}{{ 'Opening hours'|trans }}</button>
           {% if img.src %}
             <img src="{{ img.src }}" alt="{{ img.alt }}" loading="lazy">
           {% endif %}
diff --git a/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig b/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig
index 03ec8a5..118f67d 100644
--- a/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig
+++ b/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig
@@ -10,7 +10,7 @@
 
 <div class='MobileDrawer' id='PickupPointDrawer'>
   <div class='MobileDrawer-header'>
-    <button class='MobileDrawer-close' type='button' data-drawer-close>{{ svg("close") }}</button>
+    <button class='MobileDrawer-close' type='button' data-drawer-close>{{ ux_icon("close") }}</button>
   </div>
   <div>
     <div class='PickupPointDrawer-title'>{{ title }}</div>
diff --git a/components/Organisms/Card/StoreInfo/StoreInfo.twig b/components/Organisms/Card/StoreInfo/StoreInfo.twig
index 1e83d75..7a6dd38 100644
--- a/components/Organisms/Card/StoreInfo/StoreInfo.twig
+++ b/components/Organisms/Card/StoreInfo/StoreInfo.twig
@@ -18,7 +18,7 @@
     <div>{{ address.zipCode }} {{ address.city }}</div>
   </div>
   <div class='justify-between lg:flex align-center'>
-    <button class='StoreInfo-hours'>{{ svg("clock") }}{{ 'Shop opening times'|trans }}</button>
+    <button class='StoreInfo-hours'>{{ ux_icon("clock") }}{{ 'Shop opening times'|trans }}</button>
     <div class='hidden lg:block'>
       {% include '@components/Molecules/Button/Button.twig' with {text: 'Choose this shop'|trans, classes:'Button--fill lg:Button--unfill'} %}
     </div>
diff --git a/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig b/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig
index 9bdb15c..85ec3ee 100644
--- a/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig
+++ b/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig
@@ -25,7 +25,7 @@
 						{{ date }}</span>
 				</div>
 				<div class="w-12 h-12 text-theme-medium">
-					{{ svg("reinsurance-homedelivery") }}
+					{{ ux_icon("reinsurance-homedelivery") }}
 				</div>
 			</div>
 			<div class='flex items-center justify-between mt-6'>
diff --git a/components/Organisms/Modules/Payment/Payment.twig b/components/Organisms/Modules/Payment/Payment.twig
index 440d1b5..ee135d5 100644
--- a/components/Organisms/Modules/Payment/Payment.twig
+++ b/components/Organisms/Modules/Payment/Payment.twig
@@ -30,7 +30,7 @@
 				</div>
 
 				<div class="flex gap-2">
-					<div class="flex-shrink-0 w-4 h-4">{{ svg("lock") }}</div>
+					<div class="flex-shrink-0 w-4 h-4">{{ ux_icon("lock") }}</div>
 					<span class="paragraph-6">
             {{ "Payment is made via your bank's servers. We do not have access to your bank details."|trans }}
 					</span>
diff --git a/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig b/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig
index 69a7a6e..33d3908 100644
--- a/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig
+++ b/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig
@@ -16,7 +16,7 @@
         <span class='PickupPointModule-description'>{{ 'Estimated delivery on'|trans }} {{ date }}</span>
       </span>
       <span class="w-12 h-12 text-theme-medium">
-        {{ svg("reinsurance-pickup") }}
+        {{ ux_icon("reinsurance-pickup") }}
       </span>
     </span>
     <div class='flex items-center justify-between mt-6'>
@@ -30,7 +30,7 @@
       {% include '@components/Molecules/Fields/FieldInput/FieldInput.twig' with { label: "Find a delivery address"|trans, placeholder: "e.g. City, Postcode"|trans, iconButton: "search" } %}
     </div>
     <div>
-      <button class='text-black underline-with-icon' type='button'>{{ svg("pin-circle") }}{{ 'Select on map'|trans }}</button>
+      <button class='text-black underline-with-icon' type='button'>{{ ux_icon("pin-circle") }}{{ 'Select on map'|trans }}</button>
     </div>
     <div class='flex gap-1 md:gap-5'>
       {% include '@components/Molecules/Button/Button.twig' with {classes: 'PickupPointModule-buttonView', text: 'Map view'|trans, sharp:true, icon_left: 'list', variant: 'secondary'} %}
@@ -45,7 +45,7 @@
                  value='{{ pickupService.value }}'
           >
           <div class="checkmark">
-            <span>{{ svg("checkbox") }}</span>
+            <span>{{ ux_icon("checkbox") }}</span>
           </div>
           <span>{{ pickupService.name }}</span>
           {% if pickupService.img %}
diff --git a/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig b/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig
index ae5b747..f6806ed 100644
--- a/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig
+++ b/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig
@@ -28,7 +28,7 @@
             <span class='StoreDelivery-description'>{{ 'Estimated delivery on'|trans }} {{ date }}</span>
           </div>
           <div class="w-12 h-12 text-theme-medium">
-          {{ svg("reinsurance-store") }}
+          {{ ux_icon("reinsurance-store") }}
           </div>
         </div>
         <div class='flex items-center justify-between mt-6'>
@@ -67,7 +67,7 @@
   </label>
   {% if newClient == false %}
   <div class='StoreDelivery-bottom'>
-    <button class='StoreDelivery-hours' data-show-hours={{ 'See opening hours' |trans }} data-hide-hours={{ 'hide opening times' |trans }}>{{ svg("clock") }}<span>{{ 'See opening hours' |trans }}</span></span></button>
+    <button class='StoreDelivery-hours' data-show-hours={{ 'See opening hours' |trans }} data-hide-hours={{ 'hide opening times' |trans }}>{{ ux_icon("clock") }}<span>{{ 'See opening hours' |trans }}</span></span></button>
   </div>
   <div class='StoreDelivery-hoursListing md:hidden'>
     <table>
diff --git a/components/Organisms/ProductCard/ProductCard.twig b/components/Organisms/ProductCard/ProductCard.twig
index 8156c45..301947b 100644
--- a/components/Organisms/ProductCard/ProductCard.twig
+++ b/components/Organisms/ProductCard/ProductCard.twig
@@ -57,7 +57,7 @@
 
 <div class="ProductCard {{ classes }}">
 	{% if isAddToCartConfirmation or isRemoveProduct %}
-		<span class='ProductCard-iconClose'>{{ svg("close") }}</span>
+		<span class='ProductCard-iconClose'>{{ ux_icon("close") }}</span>
 	{% endif %}
 	<div class="ProductCard-header">
 		<div class="ProductCard-tagList">
@@ -72,10 +72,10 @@
 		{% if displayWishButton %}
 			<button type="button" class="ButtonWishList {% if inWishlist %} in-wishlist {% endif %}">
 				<span class="in-wishlist-icon">
-					<span>{{ svg("heart-fill") }}</span>
+					<span>{{ ux_icon("heart-fill") }}</span>
 				</span>
 				<span class="not-in-wishlist-icon">
-					<span>{{ svg("heart") }}</span>
+					<span>{{ ux_icon("heart") }}</span>
 				</span>
 			</button>
 		{% endif %}
@@ -135,15 +135,15 @@
 									{% for i in 1..5 %}
 										{% if rate >= i %}
 											<div>
-												{{ svg("star-full") }}
+												{{ ux_icon("star-full") }}
 											</div>
 										{% elseif rate <= i and rate > i - 1 %}
 											<div>
-												{{ svg("star-half-empty") }}
+												{{ ux_icon("star-half-empty") }}
 											</div>
 										{% else %}
 											<div class="star-empty">
-												{{ svg("star-full") }}
+												{{ ux_icon("star-full") }}
 											</div>
 										{% endif %}
 									{% endfor %}
@@ -193,11 +193,11 @@
 	{% if isPurchaseFunnelCard|default(0) %}
 		<div class="bottom-card-buttons">
 			<button class='hover:bg-theme-lighter' {% if disabled %} disabled {% endif %} type='button'>
-				<span>{{ svg("show") }}</span>
+				<span>{{ ux_icon("show") }}</span>
 				{{ 'View product'|trans }}
 			</button>
 			<button class='hover:bg-theme-lighter' {% if disabled %} disabled {% endif %} type='button'>
-				<span>{{ svg("delete") }}</span>
+				<span>{{ ux_icon("delete") }}</span>
 				{{ 'Delete' |trans }}
 			</button>
 		</div>
diff --git a/components/Organisms/ProductCard/PurchaseFunnel.twig b/components/Organisms/ProductCard/PurchaseFunnel.twig
index b65de7f..f1e031f 100644
--- a/components/Organisms/ProductCard/PurchaseFunnel.twig
+++ b/components/Organisms/ProductCard/PurchaseFunnel.twig
@@ -5,7 +5,7 @@
 	<div class="ProductCardWrapper ProductCardWrapper--outOfStock purchase-funnel-card-width">
 		<div class="ProductCardWrapper-outOfStockMessage">
 			<div>
-				{{ svg("error") }}
+				{{ ux_icon("error") }}
 			</div>
       <p class="paragraph-4">{{ productTitle }} {{ 'is no longer available and cannot be ordered.'|trans }}</p>
 		</div>
diff --git a/components/Organisms/Reinsurance/Reinsurance.twig b/components/Organisms/Reinsurance/Reinsurance.twig
index c7e82a7..ebc74d7 100644
--- a/components/Organisms/Reinsurance/Reinsurance.twig
+++ b/components/Organisms/Reinsurance/Reinsurance.twig
@@ -4,7 +4,7 @@
   {% for reinsurance in data %}
     <div>
       {% if reinsurance.icon %}
-        <span class='Reinsurance-icon'>{{ svg(reinsurance.icon) }}</span>
+        <span class='Reinsurance-icon'>{{ ux_icon(reinsurance.icon) }}</span>
       {% endif %}
       <span>
         {% if reinsurance.strongText %}
diff --git a/components/Organisms/SnackBar/SnackBar.twig b/components/Organisms/SnackBar/SnackBar.twig
index c143725..0e2b48c 100644
--- a/components/Organisms/SnackBar/SnackBar.twig
+++ b/components/Organisms/SnackBar/SnackBar.twig
@@ -13,7 +13,7 @@
 <div class='SnackBar SnackBar-{{ size }} SnackBar--{{ variant }}'>
   <div class='SnackBar-content'>
     {% if withIcon and icon %}
-    <div class='SnackBar-icon'>{{ svg(icon) }}</div>
+    <div class='SnackBar-icon'>{{ ux_icon(icon) }}</div>
     {% endif %}
     <div class='SnackBar-message'>{{ text }}</div>
   </div>
diff --git a/index.html.twig b/index.html.twig
index 2328011..47b4766 100644
--- a/index.html.twig
+++ b/index.html.twig
@@ -15,7 +15,7 @@
   </div>
 
 
-  <twig:ux:icon name="account" class="w-4 h-4" />
+
 
 
 
diff --git a/product.html.twig b/product.html.twig
index 68b6800..45d25a4 100644
--- a/product.html.twig
+++ b/product.html.twig
@@ -16,7 +16,7 @@
   <div class="px-6 lg:px-[120px] py-6">
     <div class="lg:justify-between lg:items-center mb-[29px] lg:flex">
       <a href="#" class="flex gap-3 typo-button-medium">
-        <span class="w-5 h-5">{{ svg('chevron-left') }}</span> {{ productCategory.i18ns.title }}
+        {{ ux_icon('chevron-left', {class: 'w-5 h-5'}) }} {{ productCategory.i18ns.title }}
       </a>
     </div>
 
diff --git a/react-components/Molecules/Filters/FilterPill.tsx b/react-components/Molecules/Filters/FilterPill.tsx
index a0860bc..c336436 100644
--- a/react-components/Molecules/Filters/FilterPill.tsx
+++ b/react-components/Molecules/Filters/FilterPill.tsx
@@ -2,38 +2,41 @@ import React from 'react';
 import type { FilterPillProps } from '@react/Molecules/Filters/FilterPill.types';
 
 export default function FilterPill({
-                                     classes = '',
-                                     value,
-                                     name,
-                                     disabled = false,
-                                     iconColor,
-                                     customText,
-                                     inputType = 'checkbox',
-                                     onChange = () => {
-                                     },
-                                     defaultChecked = false
-                                   }: FilterPillProps) {
+  classes = '',
+  value,
+  name,
+  disabled = false,
+  iconColor,
+  customText,
+  inputType = 'checkbox',
+  onChange = () => {},
+  defaultChecked = false
+}: FilterPillProps) {
   return (
     <label className={`FilterPill${classes}`}>
       <input
         type={inputType}
-        className='hidden'
+        className="hidden"
         value={value}
         defaultChecked={defaultChecked}
         name={name}
         disabled={disabled}
-        onChange={e => {
+        onChange={(e) => {
           const checked = e.target.checked;
           onChange({ checked, value });
         }}
       />
       {iconColor && (
-        <span className='FilterPill-icon' style={iconColor ? { color: iconColor } : {}}
-        >iconColor</span>
+        <span
+          className="FilterPill-icon"
+          style={iconColor ? { color: iconColor } : {}}
+        >
+          iconColor
+        </span>
       )}
       {customText}
 
-      {/*{closeButton && (<span className='FilterPill-iconClose'>{svg("close")}</span> )}*/}
+      {/*{closeButton && (<span className='FilterPill-iconClose'>{ux_icon("close")}</span> )}*/}
     </label>
   );
 }
diff --git a/src/FlexyBundle.php b/src/FlexyBundle.php
index 3329cf1..af732a1 100644
--- a/src/FlexyBundle.php
+++ b/src/FlexyBundle.php
@@ -12,7 +12,6 @@
 
 namespace FlexyBundle;
 
-use Composer\Autoload\ClassLoader;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
 use Symfony\Component\HttpKernel\Bundle\AbstractBundle;
@@ -21,14 +20,14 @@
 
 class FlexyBundle extends AbstractBundle
 {
-  public function loadExtension(array $config, ContainerConfigurator $container, ContainerBuilder $builder): void
-  {
-    $serviceConfigurator = $container->services();
+    public function loadExtension(array $config, ContainerConfigurator $container, ContainerBuilder $builder): void
+    {
+        $serviceConfigurator = $container->services();
 
-    $resourcePath = THELIA_TEMPLATE_DIR . TemplateDefinition::FRONT_OFFICE_SUBDIR . DS . ConfigQuery::read(TemplateDefinition::FRONT_OFFICE_CONFIG_NAME, 'default') . DS . 'src';
+        $resourcePath = THELIA_TEMPLATE_DIR.TemplateDefinition::FRONT_OFFICE_SUBDIR.DS.ConfigQuery::read(TemplateDefinition::FRONT_OFFICE_CONFIG_NAME, 'default').DS.'src';
 
-    $serviceConfigurator->load('FlexyBundle\\', $resourcePath)
-      ->autowire()
-      ->autoconfigure();
-  }
+        $serviceConfigurator->load('FlexyBundle\\', $resourcePath)
+          ->autowire()
+          ->autoconfigure();
+    }
 }