Skip to content

Commit fe6b050

Browse files
LucanisLucanis
committed
use symfony ux to display svg icons instead of custom function
1 parent 3d5233d commit fe6b050

File tree

41 files changed

+131
-103
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+131
-103
lines changed

‎assets/js/twig/custom-twig.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Twig from 'twig';
33
// @ts-ignore
44
import IconTwig from './IconTwig.twig';
55

6-
Twig.extendFunction('svg', (iconName: string): string => {
6+
Twig.extendFunction('ux_icon', (iconName: string): string => {
77
return IconTwig({ icon: iconName });
88
});
99

‎components/Atoms/Form/Checkbox.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<label class="Checkbox {{ classes }} {{ error ? 'error' : ''}}">
1010
<input type="checkbox" name='{{ name }}' value='{{ value }}' {% if disabled %} disabled {% endif %} {% if checked %} checked {% endif %}>
1111
<div class="checkmark">
12-
<span>{{ svg("checkbox") }}</span>
12+
{{ ux_icon('checkbox') }}
1313
</div>
1414
<span class="paragraph-5">{{ label|raw }}</span>
1515
</label>

‎components/Atoms/Form/checkbox.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
}
2828
}
2929
.checkmark {
30-
width: 16px;
31-
height: 16px;
30+
width: 1rem;
31+
height: 1rem;
3232
background: var(--white);
3333
border: 1px solid var(--current-checkbox-color);
3434
border-radius: 2px;

‎components/Atoms/Icon/Icon.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{% for icon in line %}
66
<div class='flex flex-col items-center {{ color }}'>
77
<div class='{{ size }} '>
8-
{{ svg(icon) }}
8+
{{ ux_icon(icon) }}
99
</div>
1010
<div class='text-xs'>{{ icon }}</div>
1111
</div>

‎components/Layout/Footer/Footer.twig

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,22 +41,22 @@
4141
<div class='md:flex md:justify-between md:items-center md:border-t md:border-t-grey-lighter md:px-[50px] md:pt-[30px]'>
4242
<div class='flex justify-between md:gap-[30px] mb-5 md:mb-0 text-black Footer-socials'>
4343
<div class='h-7 w-7 md:w-10 md:h-10'>
44-
{{ svg("instagram") }}
44+
{{ ux_icon('instagram') }}
4545
</div>
4646
<div class='h-7 w-7 md:w-10 md:h-10'>
47-
{{ svg("pinterest") }}
47+
{{ ux_icon('pinterest') }}
4848
</div>
4949
<div class='h-7 w-7 md:w-10 md:h-10'>
50-
{{ svg("youtube") }}
50+
{{ ux_icon('youtube') }}
5151
</div>
5252
<div class='h-7 w-7 md:w-10 md:h-10'>
53-
{{ svg("twitter") }}
53+
{{ ux_icon('twitter') }}
5454
</div>
5555
<div class='h-7 w-7 md:w-10 md:h-10'>
56-
{{ svg("facebook") }}
56+
{{ ux_icon('facebook') }}
5757
</div>
5858
<div class='h-7 w-7 md:w-10 md:h-10'>
59-
{{ svg("linkedin") }}
59+
{{ ux_icon('linkedin') }}
6060
</div>
6161
</div>
6262

‎components/Layout/Header/Header.twig

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
{% endif %}
1111

1212
<div class='flex items-center self-center h-full'>
13-
<a href="/" class='Header-logo'>{{ svg('thelia') }}</a>
13+
<a href="/" class='Header-logo'>
14+
{{ ux_icon('thelia') }}
15+
</a>
1416
</div>
1517
</div>
1618

@@ -20,8 +22,12 @@
2022
</div>
2123
{% else %}
2224
<nav id="Menu">
23-
<button type="button" data-menu-back="-1">{{ svg("arrow-left") }}</button>
24-
<button type="button" data-menu-close>{{ svg("close") }}</button>
25+
<button type="button" data-menu-back="-1">
26+
{{ ux_icon('arrow-left') }}
27+
</button>
28+
<button type="button" data-menu-close>
29+
{{ ux_icon('close') }}
30+
</button>
2531
<ul class="Header-navigation" data-menu-sub="0">
2632
{% for category in categories %}
2733
{% include '@components/Molecules/ItemHeader/ItemHeader.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
@@ -34,8 +40,12 @@
3440

3541
{% if type == "searchbar" %}
3642
<nav id="Menu" class='Header-navWrap'>
37-
<button type="button" data-menu-back="-1">{{ svg("arrow-left") }}</button>
38-
<button type="button" data-menu-close>{{ svg("close") }}</button>
43+
<button type="button" data-menu-back="-1">
44+
{{ ux_icon('arrow-left') }}
45+
</button>
46+
<button type="button" data-menu-close>
47+
{{ ux_icon('close') }}
48+
</button>
3949
<ul class="Header-navigation">
4050
{% for category in categories %}
4151
{% include '@components/Molecules/ItemHeader/ItemHeader.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}

‎components/Layout/Header/HeaderCheckout.twig

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
{% set classes = classes|default('') %}
22

33
<header class='HeaderCheckout flex justify-between items-center {{ classes }} h-12 xl:h-20 px-6 relative'>
4-
<div class='xl:mx-auto Header-logo'>{{ svg("thelia") }}</div>
4+
<div class='xl:mx-auto Header-logo'>
5+
{{ ux_icon('thelia') }}
6+
</div>
57
<div class='flex sm:absolute sm:right-6 HeaderCheckout-reassurance top-1/2 sm:-translate-y-1/2 items-center gap-[2px]'>
68
<div class="w-[20px]">
7-
{{ svg("lock") }}
9+
{{ ux_icon('lock') }}
810
</div>
911
<span class="text-grey-dark indication indication-lower">{{ '100% secure'|trans }}</span>
1012
</div>

‎components/Layout/Reinsurance/Reinsurance.twig

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
{% for reinsurance in data %}
66
<div>
77
{% if reinsurance.icon %}
8-
<span class='ReinsuranceModule-icon'>{{ svg(reinsurance.icon) }}</span>
8+
<span class='ReinsuranceModule-icon'>
9+
{{ux_icon(reinsurance.icon)}}
10+
</span>
911
{% endif %}
1012
<div>
1113
{% if reinsurance.strongText %}

‎components/Molecules/Accordion/Accordion.twig

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,16 @@
1919
<summary class='Accordion-summary'>
2020
{{ title }}
2121
{% if variant == 'faq' or (iconPlus and iconMinus) %}
22-
<span class='Accordion-icon Accordion-icon--plus'>{{ svg(iconPlus) }}</span>
23-
<span class='Accordion-icon Accordion-icon--minus'>{{ svg(iconMinus) }}</span>
22+
<span class='Accordion-icon Accordion-icon--plus'>
23+
{{ux_icon(iconPlus)}}
24+
</span>
25+
<span class='Accordion-icon Accordion-icon--minus'>
26+
{{ux_icon(iconMinus)}}
27+
</span>
2428
{% else %}
25-
<span class='Accordion-icon'>{{ svg("chevron-down") }}</span>
29+
<span class='Accordion-icon'>
30+
{{ ux_icon('chevron-down') }}
31+
</span>
2632
{% endif %}
2733
</summary>
2834
<div class="Accordion-content">

‎components/Molecules/Button/Button.twig

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,14 @@
2222

2323
<{{ tag }} class='Button {{ classes }}' {% if disabled %}disabled{% endif %} {% if href %}href='{{ href }}'{% else %}type='{{ type }}'{% endif %}>
2424
{% if icon_left %}
25-
<span class='icon icon-left'>{{ svg(icon_left) }}</span>
25+
<span class='icon icon-left'>
26+
{{ux_icon(icon_left)}}
27+
</span>
2628
{% endif %}
2729
{{ text|striptags('<span>')|raw }}
2830
{% if icon_right %}
29-
<span class='icon icon-right'>{{ svg(icon_right) }}</span>
31+
<span class='icon icon-right'>
32+
{{ux_icon(icon_right)}}
33+
</span>
3034
{% endif %}
3135
</{{ tag }}>

‎components/Molecules/Favorite/Favorite.twig

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,7 @@
33

44
<button class='Favorite {% if selected %}selected{% endif %}'>
55
<span class='text'>{{ text }}</span>
6-
<span class='star'>{{ svg("star") }}</span>
6+
<span class='star'>
7+
{{ ux_icon('star') }}
8+
</span>
79
</button>

‎components/Molecules/Filters/FilterPill/FilterPill.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
<label class="FilterPill{{ classes }}">
2020
<input type='{{ inputType }}' class='hidden' value='{{ value }}' name='{{ name }}' {% if disabled %} disabled {% endif %}/>
2121
{% if icon %}
22-
<span class="FilterPill-icon" {% if iconColor %} style="color:{{ iconColor }}" {% endif %}>{{ svg(icon) }}</span>
22+
<span class="FilterPill-icon" {% if iconColor %} style="color:{{ iconColor }}" {% endif %}>{{ ux_icon(icon) }}</span>
2323
{% endif %}
2424
{{ customText }}
2525
{% if closeButton %}
26-
<span class='FilterPill-iconClose'>{{ svg("close") }}</span>
26+
<span class='FilterPill-iconClose'>{{ ux_icon("close") }}</span>
2727
{% endif %}
2828
</label>

‎components/Molecules/Filters/FilterSelect/FilterSelect.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<p class="FilterSelect-text">{{ option.label|raw }}</p>
1717
</div>
1818
{% endfor %}
19-
<span class='FilterSelect-icon'>{{ svg("chevron-down") }}</span>
19+
<span class='FilterSelect-icon'>{{ ux_icon("chevron-down") }}</span>
2020
</div>
2121
<ul class="FilterSelect-list">
2222
{% for option in options %}
@@ -30,7 +30,7 @@
3030

3131
<div class='MobileDrawer FilterSelect-mobileDrawer' id='FilterSelectDrawer-{{ id }}'>
3232
<div class='MobileDrawer-header'>
33-
<button class='MobileDrawer-close' type='button' data-drawer-close>{{ svg("close") }}</button>
33+
<button class='MobileDrawer-close' type='button' data-drawer-close>{{ ux_icon("close") }}</button>
3434
</div>
3535
<div>
3636
<ul class="FilterSelect-mobileList">

‎components/Molecules/HeaderButton/HeaderButton.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<button {% if id %} id="{{id}}" {% endif %} class='HeaderButton {% if inactive %}HeaderButton--inactive{% endif %} {{ classes }} {% if small %}HeaderButton--small{% endif %}'>
1010
{% if icon %}
11-
<span class='HeaderButton-icon'>{{ svg(icon) }}</span>
11+
<span class='HeaderButton-icon'>{{ ux_icon(icon) }}</span>
1212
{% endif %}
1313

1414
<div class='flex flex-col items-start HeaderButton-text'>

‎components/Molecules/ItemHeader/ItemHeader.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
{{ customText }}
99
</a>
1010
{% if sub %}
11-
<button type="button" data-menu-item="{{sub}}">{{ svg("arrow-right") }}</button>
11+
<button type="button" data-menu-item="{{sub}}">{{ ux_icon("arrow-right") }}</button>
1212
<ul data-menu-sub="{{sub}}" data-menu-previous="0">
1313
<li>
1414
<a href="#0">Titre sous menu</a>
15-
<button type="button" data-menu-item="5">{{ svg("arrow-right") }}</button>
15+
<button type="button" data-menu-item="5">{{ ux_icon("arrow-right") }}</button>
1616
<ul data-menu-sub="5" data-menu-previous="{{sub}}">
1717
<li>
1818
<a href="#0">Titre sous sous menu</a>

‎components/Molecules/Link/Link.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313

1414
<a href="{{ href }}" {% if target %} target="{{ target }}" {% endif %} class='Link {{ classes }}' {% if disabled %} disabled {% endif %}>
1515
{% if iconLeft %}
16-
<span class='Link-icon'>{{ svg(iconLeft) }}</span>
16+
<span class='Link-icon'>{{ ux_icon(iconLeft) }}</span>
1717
{% endif %}
1818
{{ customText }}
1919
{% if iconRight %}
20-
<span class='Link-icon'>{{ svg(iconRight) }}</span>
20+
<span class='Link-icon'>{{ ux_icon(iconRight) }}</span>
2121
{% endif %}
2222
</a>

‎components/Molecules/Pagination/Pagination.twig

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55

66

77
{# Nombre de pages à afficher de chaque côté de la page actuelle #}
8-
{% set range = 2 %}
8+
{% set range = 2 %}
99

1010
{% if totalPages > 1 %}
1111
<nav class="Pagination">
1212
<ul class="Pagination-list">
1313
{% if currentPage != 1 %}
1414
<li class="Pagination-listItemPrev">
1515
<a href="?page={{ currentPage - 1 }}" class="Pagination-item Pagination-item--isPrev">
16-
<span class='Pagination-icon'>{{ svg("chevron-left") }}</span>
16+
<span class='Pagination-icon'>{{ ux_icon("chevron-left") }}</span>
1717
<span class='Pagination-text'>{{ prevText }}</span>
1818
</a>
1919
</li>
@@ -24,19 +24,19 @@
2424
<a href="?page=1" class="Pagination-item">1</a>
2525
</li>
2626
{% endif %}
27-
27+
2828
{% if currentPage > range + 1 %}
2929
<li><span class="Pagination-item">...</span></li>
3030
{% endif %}
31-
31+
3232
{% for page in 1..totalPages %}
3333
{% if page == currentPage %}
3434
<li><span class="Pagination-item Pagination-item--active">{{ page }}</span></li>
3535
{% elseif page > currentPage - range and page < currentPage + range %}
3636
<li><a href="?page={{ page }}" class="Pagination-item">{{ page }}</a></li>
3737
{% endif %}
3838
{% endfor %}
39-
39+
4040
{% if totalPages > currentPage + range %}
4141
<li><span class="Pagination-item">...</span></li>
4242
{% endif %}
@@ -51,7 +51,7 @@
5151
<li class="Pagination-listItemNext">
5252
<a href="?page={{ currentPage + 1 }}" class="Pagination-item Pagination-item--isNext">
5353
<span class='Pagination-text'>{{ nextText }}</span>
54-
<span class='Pagination-icon'>{{ svg("chevron-right") }}</span>
54+
<span class='Pagination-icon'>{{ ux_icon("chevron-right") }}</span>
5555
</a>
5656
</li>
5757
{% endif %}

‎components/Molecules/Score/Score.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33

44
<div class="Score">
55
{% for star in 1..score %}
6-
<span class="Score-star">{{ svg("star") }}</span>
6+
<span class="Score-star">{{ ux_icon("star") }}</span>
77
{% endfor %}
88
{% if score < maxScore %}
99
{% for star in 1..(maxScore - score) %}
10-
<span class="Score-star Score-star--empty">{{ svg("star") }}</span>
10+
<span class="Score-star Score-star--empty">{{ ux_icon("star") }}</span>
1111
{% endfor %}
1212
{% endif %}
1313
</div>

‎components/Molecules/SearchBar/SearchBar.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
{% if type != 'classic' %}{% set classes = classes ~ ' SearchBar--' ~ type %}{% endif %}
66

77
<label class="SearchBar {{ classes }}" aria-label={{"Search"|trans}}>
8-
<button class='w-4 h-4'>{{ svg("search") }}</button>
8+
<button class='w-4 h-4'>{{ ux_icon("search") }}</button>
99
<input type="text" name="query" placeholder={{"e.g. Shoes, T-shirts, ..."|trans}} autocomplete='off' value="{{ value }}"/>
1010
</label>

‎components/Molecules/Step/Steps.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
class="CheckoutSteps-stepBack"
1313
{# onClick={() => changeStep(currentStep - 1)} #}
1414
>
15-
<span>{{ svg("chevron-left") }}</span>
15+
<span>{{ ux_icon("chevron-left") }}</span>
1616
</div>
1717
<div class="StepProgressBar">
1818
<div

‎components/Molecules/Tab/Tab.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111

1212
<button class='Tab {{ classes }}' {% if disabled %}disabled{% endif %}>
1313
{% if iconLeft %}
14-
<span class='Tab-icon'>{{ svg(iconLeft) }}</span>
14+
<span class='Tab-icon'>{{ ux_icon(iconLeft) }}</span>
1515
{% endif %}
1616
{{ customText }}
1717
{% if iconRight %}
18-
<span class='Tab-icon'>{{ svg(iconRight) }}</span>
18+
<span class='Tab-icon'>{{ ux_icon(iconRight) }}</span>
1919
{% endif %}
2020
</button>

‎components/Molecules/Tag/Tag.twig

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,18 @@
1616
{% if not closeOnClick and not href and not onClick %}
1717
<span class="Tag{{ classes }}">
1818
{% if icon %}
19-
<span class="Tag-icon">{{ svg(icon) }}</span>
19+
<span class="Tag-icon">{{ ux_icon(icon) }}</span>
2020
{% endif %}
2121
{{ customText }}
2222
</span>
2323
{% else %}
2424
<button class="Tag{{ classes }} Tag--action" {% if href %} href="{{ href }}" {% endif %} {% if onClick %} onclick="onClick" {% endif %}>
2525
{% if icon %}
26-
<span class="Tag-icon">{{ svg(icon) }}</span>
26+
<span class="Tag-icon">{{ ux_icon(icon) }}</span>
2727
{% endif %}
2828
{{ customText }}
2929
{% if closeOnClick %}
30-
<span class='Tag-iconClose'>{{ svg("close") }}</span>
30+
<span class='Tag-iconClose'>{{ ux_icon("close") }}</span>
3131
{% endif %}
3232
</button>
3333
{% endif %}

‎components/Molecules/Tooltip/Tooltip.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
{% set classes = classes ~ ' Tooltip-text--' ~ position %}
66

77
<div class='Tooltip'>
8-
<span class='Tooltip-icon'>{{ svg("help") }}</span>
8+
<span class='Tooltip-icon'>{{ ux_icon("help") }}</span>
99
<span class='Tooltip-text{{ classes }}'>
10-
<span class='Tooltip-close'>{{ svg("close") }}</span>
10+
<span class='Tooltip-close'>{{ ux_icon("close") }}</span>
1111
{{ tooltip }}
1212
</span>
1313
</div>

‎components/Molecules/userMenu/UserMenu.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
<a href="{{ href }}" class='UserMenu {{ classes }}'>
1313
{{ customText }}
1414
{% if icon %}
15-
<span class='UserMenu-icon'>{{ svg("chevron-right") }}</span>
15+
<span class='UserMenu-icon'>{{ ux_icon("chevron-right") }}</span>
1616
{% endif %}
1717
</a>

‎components/Organisms/Card/Address/AddressCard.twig

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@
4343
{% if not purchaseFunnel %}
4444
<div class="bottom-card-buttons">
4545
<button {% if disabled %}disabled{% endif %} class='hover:text-theme' type='button'>
46-
<span>{{ svg("edit") }}</span>
46+
<span>{{ ux_icon("edit") }}</span>
4747
{{ 'Modify'|trans }}
4848
</button>
4949
<button {% if disabled %}disabled{% endif %} class='hover:text-theme' type='button'>
50-
<span>{{ svg("delete") }}</span>
50+
<span>{{ ux_icon("delete") }}</span>
5151
{{ 'Delete'|trans }}
5252
</button>
5353
</div>

0 commit comments

Comments
 (0)