第 51 期 适用于任何主题的 信任徽章 Shopify Trust Badge
点击这里查看视频演示 本期 YouTube 链接（免登录观看 4K）
免插件添加适用于任何主题的 Shopify 信任徽章或图标
💡
提示：滚动时点击右上角面包屑图标，可以在步骤之间快速跳转
有帮助? 请 up 主喝奶茶（页面右侧）
第 143 期 一元开店 低成本拥有你自己的 Shopify 店铺
限时福利：既可用于创建新的店铺，也可以创建测试店铺（例如免费试用插件 APP 等），避免测试插件时代码残留在主题中，拖慢店铺网速。
Shopify2006
第 142 期 适用于所有 Shopify 推出的主题 增强版本 添加三十几项功能
Shopify增强版主题，添加几十项功能，支持一键开启或关闭。适用于所有Shopify推出的 2.0 版九款主题，减少插件安装，降低每个月的插件订阅费。访问查看具体内容与视频演示
Beans
创建 Section
highlights-banners.liquid<script
type="application/json"
data-section-type="dynamic-highlights-banners"
data-section-id="{{ section.id }}">
</script>
{% if section.blocks.size > 0 %}
<style>
/* #shopify-section-{{ section.id }} {
background-color: {{ section.settings.background_color }};
} */
#shopify-section-{{ section.id }} .highlights-banners {
background-color: {{ section.settings.inner_background_color }};
padding-top: {{ section.settings.section_spacing_mobile }}px;
padding-bottom: {{ section.settings.section_spacing_mobile }}px;
}
@media screen and (min-width: 1024px) {
#shopify-section-{{section.id}} .highlights-banners {
padding-top: {{ section.settings.section_spacing_desktop }}px;
padding-bottom: {{ section.settings.section_spacing_desktop }}px;
}
}
#shopify-section-{{ section.id }} .highlights-banners-block {
color: {{ section.settings.color }};
}
#shopify-section-{{ section.id }} .highlights-banners-heading {
color: {{ section.settings.heading_color }};
}
#shopify-section-{{ section.id }} .highlights-banners-block::after {
background: {{ section.settings.dividers_color }};
}
#shopify-section-{{ section.id }} .highlights-banners-icon {
color: {{ section.settings.icon_color }};
}
</style>
<div class="highlights-banners-container">
<div
class="
highlights-banners
highlight-banners-count-{{ section.blocks.size }}
highlight-banners-align-{{ section.settings.text_alignment }}
">
{% for block in section.blocks %}
{% if block.settings.text != blank or block.settings.title != blank %}
<div
class="highlights-banners-block"
{{ block.shopify_attributes }}
>
{% capture block_icon %}
{% if block.settings.icon != 'none' or block.settings.image != blank %}
<div class="highlights-banners-icon">
{% if block.settings.image != blank %}
{%
include 'rimg',
class: 'highlights-banners-custom-icon',
img: block.settings.image,
size: 'x46'
%}
{% else %}
{% include 'icon-library', id: block.settings.icon %}
{% endif %}
</div>
{% endif %}
{% endcapture %}
{% unless section.settings.text_alignment == 'right' %}
{{ block_icon }}
{% endunless %}
<div class="highlights-banners-text">
{% if block.settings.title != blank %}
<span class="highlights-banners-heading">
{{ block.settings.title | escape }}
</span>
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
</div>
{% if section.settings.text_alignment == 'right' %}
{{ block_icon }}
{% endif %}
{% if block.settings.link != blank %}
<a
class="highlights-banners-block-link"
href="{{ block.settings.link }}"
{{ block.shopify_attributes }}
>
</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{% schema %}
{
"name": "信任徽章",
"class": "highlights-banners--section",
"settings": [
{
"type": "range",
"id": "section_spacing_desktop",
"label": "高度调节",
"info": "[使用参考](https://shopify2006.com/shopify-add-trust-badge-function/)",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"default": 45
},
{
"type": "select",
"id": "text_alignment",
"label": "文字对齐方式",
"options": [
{
"value": "left",
"label": "文字在右"
},
{
"value": "center",
"label": "文字置底"
},
{
"value": "right",
"label": "文字在左"
}
],
"default": "center"
},
{
"type": "header",
"content": "颜色"
},
{
"id": "heading_color",
"type": "color",
"label": "Heading 颜色",
"default": "#4d4d4d"
},
{
"id": "color",
"type": "color",
"label": "文字颜色",
"default": "#4d4d4d"
},
{
"id": "icon_color",
"type": "color",
"label": "图标颜色",
"default": "#4d4d4d"
},
{
"id": "dividers_color",
"type": "color",
"label": "分割线颜色",
"default": "#e3e3e3"
},
{
"id": "inner_background_color",
"type": "color",
"label": "Section 背景色",
"default": "#f8f8f8"
}
],
"blocks": [
{
"type": "highlight",
"name": "Highlight",
"settings": [
{
"id": "icon",
"type": "select",
"label": "内置 Icon",
"options": [
{
"value": "none",
"label": "No icon"
},
{
"value": "icon-cell-phone",
"label": "Cellphone"
},
{
"value": "icon-chat",
"label": "Chat"
},
{
"value": "icon-chat-alternate",
"label": "Chat alternate"
},
{
"value": "icon-credit-card",
"label": "Credit card"
},
{
"value": "icon-delivery",
"label": "Delivery"
},
{
"value": "icon-delivery-alt",
"label": "Delivery alternate"
},
{
"value": "icon-email",
"label": "Email"
},
{
"value": "icon-envelope",
"label": "Envelope"
},
{
"value": "icon-gift-card",
"label": "Gift card"
},
{
"value": "icon-heart",
"label": "Heart"
},
{
"value": "icon-label-tag",
"label": "Label tag"
},
{
"value": "icon-lock-alternate",
"label": "Lock"
},
{
"value": "icon-people",
"label": "People"
},
{
"value": "icon-people-alternate",
"label": "People alternate"
},
{
"value": "icon-pin",
"label": "Pin"
},
{
"value": "icon-question-mark",
"label": "Question mark"
},
{
"value": "icon-smile",
"label": "Smile"
},
{
"value": "icon-store",
"label": "Store"
},
{
"value": "icon-transfer",
"label": "Transfer"
},
{
"value": "icon-wallet",
"label": "Wallet"
}
],
"default": "none"
},
{
"id": "image",
"type": "image_picker",
"label": "自定义 Image",
"info": "推荐使用 50x50 的图片，设置之后会替换上方选择的图标"
},
{
"id": "title",
"type": "text",
"label": "Heading",
"default": "Highlight"
},
{
"id": "text",
"type": "richtext",
"label": "Text",
"default": "<p>Highlight text</p>"
},
{
"id": "link",
"type": "url",
"label": "Link"
}
],
"limit": 4
}
],
"presets": [
{
"name": "信任徽章-shopify2006",
"category": "Advanced",
"blocks": [
{
"type": "highlight",
"settings": {
"icon": "icon-delivery",
"title": "Free shipping",
"text": "<p>When you spend $100+</p>"
}
},
{
"type": "highlight",
"settings": {
"icon": "icon-cell-phone",
"title": "Give us a call",
"text": "<p>+1 (201) 555-5555</p>"
}
},
{
"type": "highlight",
"settings": {
"icon": "icon-chat-alternate",
"title": "Chat with us",
"text": "<p>We offer 24-hour chat support</p>"
}
},
{
"type": "highlight",
"settings": {
"icon": "icon-pin",
"title": "Locations",
"text": "<p>Find a store near you</p>"
}
}
]
}
]
}
{% endschema %}创建 Snippet
icon-library.liquid{% comment %}
@param id {String}
Name of icon to display
@param icon_class {string}
Custom class to add to SVG
{% endcomment %}
{%- capture icon -%}
{%- capture shared_svg_attrs -%}
class="{{ id | replace: '_', '-' }} {% if icon_class %}{{ icon_class }}{% endif %}"
aria-hidden="true"
focusable="false"
role="presentation"
xmlns="http://www.w3.org/2000/svg"
{%- endcapture -%}
{% assign icon_name = id | replace: '-', '_' %}
{% assign icon_name = 'general.icons.' | append: icon_name %}
{% assign icon_name = icon_name | t %}
{% capture icon_title %}
<title>{{ 'general.icons.icon_title' | t: name: icon_name }}</title>
{% endcapture %}
{% if id == 'icon-account' %}
<svg {{ shared_svg_attrs }} width="24" height="24" viewBox="0 0 24 24" fill="none">
{{ icon_title }}
<path d="M20.5 19.5V21.525C20.5 21.5802 20.4552 21.625 20.4 21.625H3.6C3.54477 21.625 3.5 21.5802 3.5 21.525V19.5C3.5 18.3728 3.94777 17.2918 4.7448 16.4948C5.54183 15.6978 6.62283 15.25 7.75 15.25H16.25C17.3772 15.25 18.4582 15.6978 19.2552 16.4948C20.0522 17.2918 20.5 18.3728 20.5 19.5Z" stroke="currentColor" stroke-width="1.75"/>
<path d="M12 11C14.3472 11 16.25 9.09721 16.25 6.75C16.25 4.40279 14.3472 2.5 12 2.5C9.65279 2.5 7.75 4.40279 7.75 6.75C7.75 9.09721 9.65279 11 12 11Z" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-cart' %}
<svg {{ shared_svg_attrs }} width="24" height="24" viewBox="0 0 24 24" fill="none">
{{ icon_title }}
<path d="M4.28572 1.85718L5.13117 1.63172C5.02903 1.24869 4.68214 0.982178 4.28572 0.982178V1.85718ZM6.85715 17.7143L6.01581 17.4739C5.94038 17.7379 5.99325 18.022 6.15859 18.2412C6.32393 18.4604 6.58258 18.5893 6.85715 18.5893V17.7143ZM18.4286 13.8572L18.4984 14.7294C18.8104 14.7044 19.0853 14.5147 19.2193 14.2318L18.4286 13.8572ZM22.2857 5.71432L23.0765 6.0889L23.637 4.90557L22.3293 4.84041L22.2857 5.71432ZM0.857147 2.73218H4.28572V0.982178H0.857147V2.73218ZM6.87296 14.4739L6.01581 17.4739L7.69848 17.9547L8.55562 14.9547L6.87296 14.4739ZM6.85715 18.5893H19.2857V16.8393H6.85715V18.5893ZM7.78407 15.5865L18.4984 14.7294L18.3588 12.985L7.64451 13.8421L7.78407 15.5865ZM19.2193 14.2318L23.0765 6.0889L21.4949 5.33975L17.6378 13.4826L19.2193 14.2318ZM3.44026 2.08263L4.24026 5.08263L5.93117 4.63172L5.13117 1.63172L3.44026 2.08263ZM4.24026 5.08263L6.86883 14.9398L8.55975 14.4889L5.93117 4.63172L4.24026 5.08263ZM22.3293 4.84041L5.12927 3.98326L5.04217 5.73109L22.2422 6.58824L22.3293 4.84041Z" fill="currentColor"/>
<path d="M7.6875 20.8C8.0672 20.8 8.375 21.1079 8.375 21.4875C8.375 21.8672 8.0672 22.175 7.6875 22.175C7.3078 22.175 7 21.8672 7 21.4875C7 21.1079 7.3078 20.8 7.6875 20.8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.6875 20.8C19.0672 20.8 19.375 21.1079 19.375 21.4875C19.375 21.8672 19.0672 22.175 18.6875 22.175C18.3078 22.175 18 21.8672 18 21.4875C18 21.1079 18.3078 20.8 18.6875 20.8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-bag' %}
<svg {{ shared_svg_attrs }} width="19" height="24" viewBox="0 0 19 24" fill="none">
{{ icon_title }}
<path d="M1.75 6.75H17.25V21.75H1.75V6.75Z" stroke="currentColor" stroke-width="1.5"/>
<path d="M13 10.5V5.5C13 2.83333 11.4444 1.5 9.5 1.5C7.55556 1.5 6 2.83333 6 5.5L6 10.5" stroke="currentColor" stroke-width="1.5"/>
</svg>
{% endif %}
{% if id == 'icon-close' %}
<svg {{ shared_svg_attrs }} width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M17 1L1 17" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
<path d="M1 1L17 17" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-cell-phone' %}
<svg {{ shared_svg_attrs }} width="26" height="46" viewBox="0 0 26 46" fill="none">
{{ icon_title }}
<path d="M13 40.9583V40.9583C13.2532 40.9583 13.4584 41.1635 13.4584 41.4166V41.4166C13.4584 41.6698 13.2532 41.875 13 41.875V41.875C12.7469 41.875 12.5417 41.6698 12.5417 41.4166V41.4166C12.5417 41.1635 12.7469 40.9583 13 40.9583" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.08334 5.91666C1.08334 4.25981 2.42649 2.91666 4.08334 2.91666H21.9167C23.5735 2.91666 24.9167 4.2598 24.9167 5.91666V42.0833C24.9167 43.7402 23.5735 45.0833 21.9167 45.0833H4.08335C2.42649 45.0833 1.08334 43.7402 1.08334 42.0833V5.91666Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.9167 37.75H1.08334" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.9167 10.25H1.08334" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.25 6.58331H15.75" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-chat-alternate' %}
<svg {{ shared_svg_attrs }} width="44" height="44" viewBox="0 0 44 44" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.75 27.5C18.0532 27.5 21.5417 24.0115 21.5417 19.7083C21.5417 15.4051 18.0532 11.9167 13.75 11.9167C9.44678 11.9167 5.95833 15.4051 5.95833 19.7083C5.95833 24.0115 9.44678 27.5 13.75 27.5Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.916656 43.0833C0.916657 35.9957 6.66234 30.25 13.75 30.25C20.8376 30.25 26.5833 35.9957 26.5833 43.0833H0.916656Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.6282 22.0623C26.5264 22.4134 27.4621 22.6594 28.4167 22.7957C28.4167 23.8407 28.4167 27.5073 28.4167 28.424C29.3334 27.5073 34.8334 22.924 35.75 22.0788C40.0663 20.5454 42.9852 16.5035 43.0834 11.924C42.8242 5.59741 37.4939 0.673845 31.1667 0.916659C26.2717 0.814316 21.8153 3.726 19.943 8.24999" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.125 11.4418C26.2467 11.4413 26.3636 11.4895 26.4496 11.5755C26.5357 11.6616 26.5838 11.7785 26.5833 11.9002V11.9002C26.5838 12.0219 26.5357 12.1387 26.4496 12.2248C26.3636 12.3109 26.2467 12.359 26.125 12.3585V12.3585C26.0033 12.359 25.8864 12.3109 25.8004 12.2248C25.7143 12.1387 25.6662 12.0219 25.6667 11.9002V11.9002C25.6667 11.647 25.8719 11.4418 26.125 11.4418" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31.1667 11.4418C31.4198 11.4418 31.625 11.647 31.625 11.9002V11.9002C31.6255 12.0219 31.5774 12.1387 31.4913 12.2248C31.4052 12.3109 31.2884 12.359 31.1667 12.3585V12.3585C31.045 12.359 30.9281 12.3109 30.842 12.2248C30.756 12.1387 30.7078 12.0219 30.7083 11.9002V11.9002C30.7083 11.647 30.9135 11.4418 31.1667 11.4418" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36.2083 11.4418C36.4615 11.4418 36.6667 11.647 36.6667 11.9002V11.9002C36.6671 12.0219 36.619 12.1387 36.533 12.2248C36.4469 12.3109 36.33 12.359 36.2083 12.3585V12.3585C36.0866 12.359 35.9698 12.3109 35.8837 12.2248C35.7976 12.1387 35.7495 12.0219 35.75 11.9002V11.9002C35.75 11.647 35.9552 11.4418 36.2083 11.4418" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-chat' %}
<svg {{ shared_svg_attrs }} width="44" height="44" viewBox="0 0 44 44" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4167 30.25C17.4167 38.1113 26.5833 44 34.8333 40.3333L42.1667 43.0833L39.4167 37.5833C41.7262 35.8533 43.0851 33.1357 43.0833 30.25C43.0833 24.4677 37.3377 19.25 30.25 19.25C23.1623 19.25 17.4167 24.4677 17.4167 30.25Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M32.0833 13.75L32.9583 13.7616V13.75H32.0833ZM0.916656 13.75H0.0416565C0.0416565 13.7561 0.041721 13.7623 0.0418501 13.7684L0.916656 13.75ZM5.53116 22.8617L6.29088 23.2958C6.50802 22.9157 6.41096 22.4337 6.06366 22.1673L5.53116 22.8617ZM1.83332 29.3333L1.0736 28.8992C0.888951 29.2224 0.928935 29.627 1.17326 29.9077C1.41759 30.1885 1.81279 30.284 2.15835 30.1457L1.83332 29.3333ZM10.8882 25.7107L11.153 24.8767C10.9598 24.8154 10.7513 24.823 10.5631 24.8983L10.8882 25.7107ZM32.7599 15.7452C32.8831 15.091 32.9494 14.4273 32.9582 13.7616L31.2084 13.7384C31.2009 14.3032 31.1446 14.8663 31.0401 15.4214L32.7599 15.7452ZM32.9583 13.75C32.9583 6.02815 25.4337 0.0416565 16.5 0.0416565V1.79166C24.7996 1.79166 31.2083 7.2965 31.2083 13.75H32.9583ZM16.5 0.0416565C7.56627 0.0416565 0.0416565 6.02815 0.0416565 13.75H1.79166C1.79166 7.2965 8.20037 1.79166 16.5 1.79166V0.0416565ZM0.0418501 13.7684C0.122772 17.6142 1.94636 21.215 4.99865 23.556L6.06366 22.1673C3.43293 20.1497 1.86121 17.0462 1.79146 13.7316L0.0418501 13.7684ZM4.77143 22.4276L1.0736 28.8992L2.59305 29.7674L6.29088 23.2958L4.77143 22.4276ZM2.15835 30.1457L11.2132 26.5231L10.5631 24.8983L1.5083 28.5209L2.15835 30.1457ZM10.6233 26.5446C11.6026 26.8556 12.6054 27.0875 13.6218 27.2381L13.8782 25.5069C12.9544 25.3701 12.0431 25.1594 11.153 24.8767L10.6233 26.5446Z" fill="currentColor"/>
</svg>
{% endif %}
{% if id == 'icon-checkbox' %}
<svg {{ shared_svg_attrs }} width="11" height="11" viewBox="0 0 11 11" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 3.44141e-05C0 3.44141e-05 7.89822 -2.38474e-05 11 1.12419e-05C11 1.24913 11 11 11 11H0V3.44141e-05ZM2.57063 5.08793L1.69232 5.94339L4.32809 8.51316L9.3077 3.65962L8.42939 2.80246L4.32809 6.80139L2.57063 5.08793Z" fill="currentColor"/>
</svg>
{% endif %}
{% if id == 'icon-checkmark' %}
<svg {{ shared_svg_attrs }} width="18" height="13" viewBox="0 0 18 13" fill="none">
{{ icon_title }}
<path d="M1 6L6 11L17 1" stroke="currentColor" stroke-width="2"/>
</svg>
{% endif %}
{% if id == 'icon-checkout-lock' %}
<svg {{ shared_svg_attrs }} width="16" height="20" viewBox="0 0 16 20" fill="none">
{{ icon_title }}
<path d="M1.875 8.875H14.125V18.125H1.875V8.875Z" stroke="currentColor" stroke-width="1.75"/>
<path d="M12 7V6C12 3.75925 10.2091 2 8 2C5.79086 2 4 3.79086 4 6V7" stroke="currentColor" stroke-width="1.75"/>
</svg>
{% endif %}
{% if id == 'icon-chevron-down-small' %}
<svg {{ shared_svg_attrs }} width="8" height="6" viewBox="0 0 8 6" fill="none">
{{ icon_title }}
<path class="icon-chevron-down-left" d="M4 4.5L7 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
<path class="icon-chevron-down-right" d="M4 4.5L1 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
</svg>
{% endif %}
{% if id == 'icon-chevron-down-thin' %}
<svg {{ shared_svg_attrs }} width="8" height="5" viewBox="0 0 8 5" fill="none">
{{ icon_title }}
<path d="M0.5 0.5L4 4L7.5 0.5" stroke="currentColor" stroke-width="1.25"/>
</svg>
{% endif %}
{% if id == 'icon-chevron-down' %}
<svg {{ shared_svg_attrs }} width="14" height="8" viewBox="0 0 14 8" fill="none">
{{ icon_title }}
<path class="icon-chevron-down-left" d="M7 6.75L12.5 1.25" stroke="currentColor" stroke-width="1.75" stroke-linecap="square"/>
<path class="icon-chevron-down-right" d="M7 6.75L1.5 1.25" stroke="currentColor" stroke-width="1.75" stroke-linecap="square"/>
</svg>
{% endif %}
{% if id == 'icon-chevron-signpost' %}
<svg {{ shared_svg_attrs }} width="14" height="14" viewBox="0 0 14 14" fill="none">
{{ icon_title }}
<path d="M4 5.75L7 8.75L10 5.75" stroke="currentColor" stroke-width="1.25"/>
<circle cx="7" cy="7" r="6.375" stroke="currentColor" stroke-width="1.25"/>
</svg>
{% endif %}
{% if id == 'icon-credit-card' %}
<svg {{ shared_svg_attrs }} width="44" height="44" viewBox="0 0 44 44" fill="none">
{{ icon_title }}
<path d="M0.999996 4.84524H0.124996H0.999996ZM0.999996 31.1548H0.124996H0.999996ZM40.875 4.84524C40.875 3.34616 39.6636 2.125 38.1621 2.125V3.875C38.6906 3.875 39.125 4.30612 39.125 4.84524H40.875ZM38.1621 2.125H2.83794V3.875H38.1621V2.125ZM2.83794 2.125C1.33636 2.125 0.124996 3.34616 0.124996 4.84524H1.875C1.875 4.30612 2.30938 3.875 2.83794 3.875V2.125ZM0.124996 4.84524V31.1548H1.875V4.84524H0.124996ZM0.124996 31.1548C0.124996 32.6538 1.33636 33.875 2.83794 33.875V32.125C2.30939 32.125 1.875 31.6939 1.875 31.1548H0.124996ZM22 32.125H2.83794V33.875H22V32.125ZM40.875 18V4.84524H39.125V18H40.875Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M27 29.8586C27 28.8321 27.8321 28 28.8586 28H41.1414C42.1679 28 43 28.8321 43 29.8586V40.1414C43 41.1679 42.1679 42 41.1414 42H35H28.8586C27.8321 42 27 41.1679 27 40.1414V29.8586Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35 37.231C36.2273 37.231 37.2222 36.2361 37.2222 35.0088C37.2222 33.7815 36.2273 32.7865 35 32.7865C33.7727 32.7865 32.7778 33.7815 32.7778 35.0088C32.7778 36.2361 33.7727 37.231 35 37.231Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M39.4444 25.4444H38.5694H39.4444ZM30.5555 25.4444H31.4305H30.5555ZM40.3194 25.4444C40.3194 23.544 39.3056 21.7879 37.6597 20.8377L36.7847 22.3532C37.8891 22.9908 38.5694 24.1692 38.5694 25.4444H40.3194ZM37.6597 20.8377C36.0139 19.8874 33.9861 19.8874 32.3403 20.8377L33.2153 22.3532C34.3197 21.7156 35.6803 21.7156 36.7847 22.3532L37.6597 20.8377ZM32.3403 20.8377C30.6944 21.7879 29.6805 23.544 29.6805 25.4444H31.4305C31.4305 24.1692 32.1109 22.9908 33.2153 22.3532L32.3403 20.8377ZM29.6805 25.4444V26.1087H31.4305V25.4444H29.6805ZM38.5694 25.4444V26.1087H40.3194V25.4444H38.5694Z" fill="currentColor"/>
<path d="M1 10H40V13H1V10Z" fill="currentColor" stroke="currentColor" stroke-width="1.75"/>
<path d="M6 18H12" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-delivery-alt' %}
<svg {{ shared_svg_attrs }} width="44" height="44" viewBox="0 0 44 44" fill="none">
{{ icon_title }}
<path d="M23.3354 38.6072L6.6199 35.0864C5.3834 34.8263 4.09917 35.2082 3.20574 36.1017L1.83334 37.4741" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M28.9241 33.8244L35.4042 5.97387C35.7838 4.266 37.2969 3.04965 39.0464 3.04585H42.599" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.0447 27.6598L30.3806 9.47277C30.6146 8.47108 29.9956 7.46852 28.9952 7.22907L12.6274 3.31755C11.6257 3.08357 10.6231 3.70265 10.3837 4.70304L4.73706 28.346C4.62187 28.8285 4.70314 29.337 4.96299 29.7596C5.22284 30.1821 5.63997 30.4841 6.12254 30.599L19.5679 33.8038" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.1653 4.40201L15.6489 10.7592C15.5666 11.1035 15.686 11.4648 15.9571 11.6924C16.2283 11.92 16.6048 11.9749 16.9297 11.8343L19.5025 10.7124L21.3161 12.8944C21.5418 13.1646 21.9002 13.2851 22.2433 13.2061C22.5864 13.1272 22.8561 12.8621 22.9409 12.5205L24.5601 6.14461" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.0098 43.0834C30.5914 43.0834 32.6842 40.9906 32.6842 38.409C32.6842 35.8274 30.5914 33.7346 28.0098 33.7346C25.4282 33.7346 23.3354 35.8274 23.3354 38.409C23.3354 40.9906 25.4282 43.0834 28.0098 43.0834Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-delivery' %}
<svg {{ shared_svg_attrs }} width="44" height="40" viewBox="0 0 44 40" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.16665 34.6667C11.1917 34.6667 12.8333 33.0251 12.8333 31C12.8333 28.975 11.1917 27.3333 9.16665 27.3333C7.14161 27.3333 5.49998 28.975 5.49998 31C5.49998 33.0251 7.14161 34.6667 9.16665 34.6667Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.8333 34.6667C36.8584 34.6667 38.5 33.0251 38.5 31C38.5 28.975 36.8584 27.3333 34.8333 27.3333C32.8083 27.3333 31.1667 28.975 31.1667 31C31.1667 33.0251 32.8083 34.6667 34.8333 34.6667Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.49999 31H2.74999C1.73747 31 0.916658 30.1792 0.916658 29.1667V21.8608C0.916008 21.2679 1.2022 20.7112 1.68482 20.3667L7.33332 18.1667L8.82016 10.3878C9.0245 9.57214 9.75758 9.00003 10.5985 9.00001H17.4167V7.16668C17.4167 6.15415 18.2375 5.33334 19.25 5.33334H41.25C42.2625 5.33334 43.0833 6.15415 43.0833 7.16668V29.1667C43.0833 30.1792 42.2625 31 41.25 31H38.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.8333 31H31.1667" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.4167 9V27.3333" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M0.916656 25.5H3.66666" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.33333 18.1667H17.4167" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-email' %}
<svg {{ shared_svg_attrs }} width="44" height="44" viewBox="0 0 44 44" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9983 29.4244C26.0979 29.4244 29.4212 26.101 29.4212 22.0015C29.4212 17.9019 26.0979 14.5786 21.9983 14.5786C17.8987 14.5786 14.5754 17.9019 14.5754 22.0015C14.5754 26.101 17.8987 29.4244 21.9983 29.4244Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M32.7203 37.6721C25.5221 42.6084 15.8855 42.0006 9.36458 36.199C2.8436 30.3974 1.11858 20.8971 5.1837 13.1734C9.24883 5.44965 18.0565 1.49287 26.5307 3.58346C35.0048 5.67405 40.9616 13.2733 40.968 22.0015V23.651C40.968 26.8396 38.3831 29.4244 35.1946 29.4244C32.006 29.4244 29.4212 26.8396 29.4212 23.651V22.0015" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-envelope' %}
<svg {{ shared_svg_attrs }} width="48" height="44" viewBox="0 0 48 44" fill="none">
{{ icon_title }}
<path d="M0.875 35.5V8.5C0.875 7.60254 1.60254 6.875 2.5 6.875H45.5C46.3975 6.875 47.125 7.60254 47.125 8.5V35.5C47.125 36.3975 46.3975 37.125 45.5 37.125H2.5C1.60254 37.125 0.875 36.3975 0.875 35.5Z" stroke="currentColor" stroke-width="1.75"/>
<path d="M8 14L24 25L40 14" stroke="currentColor" stroke-width="1.75"/>
<path d="M29.6834 21.7066L40 29M18.3166 21.7066L8 29" stroke="currentColor" stroke-width="1.75"/>
</svg>
{% endif %}
{% if id == 'icon-filters' %}
<svg {{ shared_svg_attrs }} width="19" height="13" viewBox="0 0 19 13" fill="none">
{{ icon_title }}
<circle cx="14" cy="3" r="2" stroke="currentColor" stroke-width="1.25"/>
<path d="M0 3H12M19 3H16" stroke="currentColor" stroke-width="1.25"/>
<circle r="2" transform="matrix(-1 0 0 1 5 10)" stroke="currentColor" stroke-width="1.25"/>
<path d="M19 10H7M0 10H3" stroke="currentColor" stroke-width="1.25"/>
</svg>
{% endif %}
{% if id == 'icon-gift-card' %}
<svg {{ shared_svg_attrs }} width="44" height="44" viewBox="0 0 44 44" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 8C1 6.89543 1.89543 6 3 6H41C42.1046 6 43 6.89543 43 8V35C43 36.1046 42.1046 37 41 37H3C1.89543 37 1 36.1046 1 35V8Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 22H43" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
<path d="M22 37L22 22" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31 18C29 20 25.0718 21.1568 22.4573 21.8597C23.1585 19.2446 23.8286 15.63 25.5 13.5C27.5 11 30.5 11.5 31.5 12.5C32.5 13.5 33.2352 15.7648 31 18Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5 22C24.1667 24 29.6 28.5 32 30.5" stroke="currentColor" stroke-width="2"/>
<path d="M22.1488 22.7047C22.6155 22.8302 23.0955 22.5536 23.221 22.0869C23.3464 21.6202 23.0698 21.1402 22.6031 21.0147L22.1488 22.7047ZM14 12.5L13.3845 11.8781L13.3845 11.8781L14 12.5ZM13.3813 19.1187C14.641 20.3784 16.2333 21.0968 17.7808 21.5884C18.5573 21.8351 19.3393 22.0297 20.0773 22.2041C20.8266 22.3812 21.5124 22.5336 22.1488 22.7047L22.6031 21.0147C21.9323 20.8344 21.1969 20.6705 20.4798 20.501C19.7515 20.3289 19.022 20.1465 18.3107 19.9206C16.8828 19.4669 15.5943 18.8568 14.6188 17.8813L13.3813 19.1187ZM22.3707 16.9129C22.087 14.0765 20.4256 12.2679 18.5644 11.4373C17.6444 11.0267 16.6661 10.8499 15.7706 10.9083C14.8852 10.9661 14.0077 11.2613 13.3845 11.8781L14.6156 13.1219C14.8528 12.8871 15.2804 12.694 15.8845 12.6546C16.4784 12.6159 17.1738 12.733 17.8512 13.0353C19.1848 13.6305 20.413 14.9235 20.6294 17.0871L22.3707 16.9129ZM13.3845 11.8781C12.6814 12.5741 12.0173 13.69 11.8562 14.9868C11.6899 16.326 12.0695 17.807 13.3813 19.1187L14.6188 17.8813C13.6953 16.9578 13.4919 16.0159 13.5929 15.2024C13.6992 14.3465 14.1526 13.5801 14.6156 13.1219L13.3845 11.8781Z" fill="currentColor"/>
<path d="M22 22C19.3333 22.5 14.2 27.8 13 31" stroke="currentColor" stroke-width="2"/>
</svg>
{% endif %}
{% if id == 'icon-grid' %}
<svg {{ shared_svg_attrs }} width="20" height="20" viewBox="0 0 20 20" fill="none">
{{ icon_title }}
<rect x="4" y="4" width="4" height="4" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
<rect x="12" y="4" width="4" height="4" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
<rect x="4" y="12" width="4" height="4" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
<rect x="12" y="12" width="4" height="4" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-heart' %}
<svg {{ shared_svg_attrs }} width="44" height="44" viewBox="0 0 44 44" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.9222 7.17047L22 9.88539L19.0778 7.16269C11.8687 -0.0796912 1.22405 6.3945 1.00455 13.773C0.718252 23.3841 13.9988 35.4146 22 41C30.0012 35.4146 43.2817 23.3822 42.9954 13.773C42.7759 6.3945 32.1313 -0.0796912 24.9222 7.17047Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M37.5 17.5C39.8907 13.1171 35.6134 8.41659 31.5 8.71234" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-label-tag' %}
<svg {{ shared_svg_attrs }} width="44" height="44" viewBox="0 0 44 44" fill="none">
{{ icon_title }}
<path d="M30.9112 17.1934C32.9586 17.1934 34.6185 15.5336 34.6185 13.4861C34.6185 11.4386 32.9586 9.77881 30.9112 9.77881C28.8637 9.77881 27.2039 11.4386 27.2039 13.4861C27.2039 15.5336 28.8637 17.1934 30.9112 17.1934Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5865 41.5053L2.88978 30.8034C1.41322 29.3256 1.41322 26.9302 2.88978 25.4524L22.7448 5.59149C23.4528 4.88229 24.4134 4.48344 25.4153 4.48264L36.1266 4.48264C38.2121 4.47961 39.9066 6.16592 39.9146 8.25238L39.9146 18.9634C39.9148 19.968 39.5153 20.9313 38.8045 21.6407L18.9349 41.5071C18.2256 42.2167 17.2635 42.6152 16.2603 42.6149C15.2572 42.6145 14.2954 42.2154 13.5865 41.5053Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.19696 29.6798L19.0908 19.7859" stroke="currentColor" stroke-width="1.75"/>
<path d="M12.4949 32.9777L19.0909 26.3818" stroke="currentColor" stroke-width="1.75"/>
<path d="M31.2736 11.7752C30.9319 12.1169 30.9319 12.6709 31.2736 13.0126C31.6153 13.3543 32.1693 13.3543 32.511 13.0126L31.2736 11.7752ZM43.1259 2.39774C43.4676 2.05603 43.4676 1.50201 43.1259 1.1603C42.7842 0.818595 42.2301 0.818595 41.8884 1.1603L43.1259 2.39774ZM32.511 13.0126L43.1259 2.39774L41.8884 1.1603L31.2736 11.7752L32.511 13.0126Z" fill="currentColor"/>
</svg>
{% endif %}
{% if id == 'icon-list' %}
<svg {{ shared_svg_attrs }} width="20" height="20" viewBox="0 0 20 20" fill="none">
{{ icon_title }}
<path d="M4 4.75H16" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
<path d="M4 15.25H16" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
<path d="M4 10H16" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-lock-alternate' %}
<svg {{ shared_svg_attrs }} width="38" height="44" viewBox="0 0 38 44" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 19.2756C4 18.1956 4.87555 17.32 5.95559 17.32H32.0444C33.1245 17.32 34 18.1956 34 19.2756V40.0278C34 41.1078 33.1245 41.9833 32.0444 41.9833H5.95559C4.87555 41.9833 4 41.1078 4 40.0278V19.2756Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 27.0037C23.0018 25.0056 21.5288 23.3127 19.5497 23.0382C17.5705 22.7638 15.6924 23.9921 15.1505 25.9153C14.6086 27.8385 15.5691 29.8666 17.4004 30.6658V34.2031C17.4004 35.0867 18.1167 35.803 19.0003 35.803C19.8839 35.803 20.6002 35.0867 20.6002 34.2031V30.6658C22.0566 30.0302 22.9985 28.5927 23 27.0037V27.0037Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.3334 10.3333L26.4584 10.3333V10.3333H27.3334ZM10.6667 10.3333L11.5417 10.3333V10.3333L10.6667 10.3333ZM28.2084 10.3333C28.2084 7.04351 26.4533 4.00359 23.6042 2.35868L22.7292 3.87423C25.0368 5.20653 26.4584 7.66873 26.4584 10.3333L28.2084 10.3333ZM23.6042 2.35868C20.7551 0.713772 17.2449 0.713772 14.3959 2.35868L15.2709 3.87423C17.5785 2.54192 20.4216 2.54192 22.7292 3.87423L23.6042 2.35868ZM14.3959 2.35868C11.5468 4.00359 9.79169 7.04351 9.79169 10.3333L11.5417 10.3333C11.5417 7.66873 12.9632 5.20653 15.2709 3.87423L14.3959 2.35868ZM9.79169 10.3333L9.79169 17.5789H11.5417L11.5417 10.3333H9.79169ZM26.4584 10.3333V17.5789H28.2084V10.3333H26.4584Z" fill="currentColor"/>
</svg>
{% endif %}
{% if id == 'icon-lock' %}
<svg {{ shared_svg_attrs }} width="19" height="24" viewBox="0 0 19 24" fill="none">
{{ icon_title }}
<path d="M1.875 10.875H17.125V22.125H1.875V10.875Z" stroke="currentColor" stroke-width="1.75"/>
<path d="M15 9V7.5C15 4.46243 12.5376 2 9.5 2C6.46243 2 4 4.46243 4 7.5V9" stroke="currentColor" stroke-width="1.75"/>
<circle cx="9.5" cy="16.5" r="1.625" stroke="currentColor" stroke-width="1.75"/>
</svg>
{% endif %}
{% if id == 'icon-menu-close' %}
<svg {{ shared_svg_attrs }} width="13" height="13" viewBox="0 0 13 13" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 7.73744L1.61872 12.6187L0.381283 11.3813L5.26256 6.50001L0.381283 1.61872L1.61872 0.381287L6.5 5.26257L11.3813 0.381287L12.6187 1.61872L7.73744 6.5L12.6187 11.3813L11.3813 12.6187L6.5 7.73744Z" fill="currentColor"/>
</svg>
{% endif %}
{% if id == 'icon-people-alternate' %}
<svg {{ shared_svg_attrs }} width="44" height="40" viewBox="0 0 44 40" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8934 20C18.1219 20 21.5497 16.5722 21.5497 12.3438C21.5497 8.11532 18.1219 4.6875 13.8934 4.6875C9.665 4.6875 6.23718 8.11532 6.23718 12.3438C6.23718 16.5722 9.665 20 13.8934 20Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.28308 35.3125L0.408081 35.3125L0.408081 36.1875H1.28308V35.3125ZM26.5037 35.3125V36.1875H27.3787L27.3787 35.3125L26.5037 35.3125ZM2.15808 35.3125C2.15808 28.8313 7.41215 23.5772 13.8934 23.5772V21.8272C6.44566 21.8272 0.408081 27.8648 0.408081 35.3125L2.15808 35.3125ZM13.8934 23.5772C20.3746 23.5772 25.6287 28.8313 25.6287 35.3125L27.3787 35.3125C27.3787 27.8648 21.3411 21.8272 13.8934 21.8272V23.5772ZM26.5037 34.4375H1.28308V36.1875H26.5037V34.4375Z" fill="currentColor"/>
<path d="M42.7169 35.3125V36.1875H43.5919L43.5919 35.3125L42.7169 35.3125ZM29.9265 36.1875H42.7169V34.4375H29.9265V36.1875ZM43.5919 35.3125C43.5918 31.549 41.6295 28.0578 38.4146 26.1013L37.5048 27.5962C40.198 29.2352 41.8418 32.1598 41.8419 35.3125L43.5919 35.3125ZM38.4146 26.1013C35.1996 24.1448 31.1972 24.006 27.8544 25.7351L28.6585 27.2895C31.4587 25.841 34.8116 25.9572 37.5048 27.5962L38.4146 26.1013Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.7079 22.7022C35.9414 22.7022 38.5627 20.0809 38.5627 16.8474C38.5627 13.6139 35.9414 10.9926 32.7079 10.9926C29.4744 10.9926 26.8531 13.6139 26.8531 16.8474C26.8531 20.0809 29.4744 22.7022 32.7079 22.7022Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-people' %}
<svg {{ shared_svg_attrs }} width="44" height="40" viewBox="0 0 44 40" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0896 19.9988C18.2055 19.9988 21.5421 16.6622 21.5421 12.5463C21.5421 8.43041 18.2055 5.09381 14.0896 5.09381C9.97369 5.09381 6.63708 8.43041 6.63708 12.5463C6.63708 16.6622 9.97369 19.9988 14.0896 19.9988Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.81482 34.9038H0.939819V35.7788H1.81482V34.9038ZM26.3643 34.9038V35.7788H27.2393V34.9038H26.3643ZM2.68982 34.9038C2.68982 28.6079 7.79365 23.5041 14.0895 23.5041V21.7541C6.82715 21.7541 0.939819 27.6414 0.939819 34.9038H2.68982ZM14.0895 23.5041C20.3854 23.5041 25.4893 28.6079 25.4893 34.9038H27.2393C27.2393 27.6414 21.3519 21.7541 14.0895 21.7541V23.5041ZM26.3643 34.0288H1.81482V35.7788H26.3643V34.0288Z" fill="currentColor"/>
<path d="M25.4874 18.5767L24.9692 19.2817L24.9731 19.2845L25.4874 18.5767ZM24.8566 8.29071C27.1664 5.57288 31.2217 5.19197 33.9972 7.43215L35.0964 6.07038C31.5822 3.23402 26.4476 3.7163 23.5231 7.15742L24.8566 8.29071ZM33.9972 7.43215C36.7727 9.67233 37.2563 13.7167 35.0872 16.5481L36.4764 17.6124C39.2228 14.0275 38.6105 8.90673 35.0964 6.07038L33.9972 7.43215ZM35.0872 16.5481C32.9181 19.3795 28.8872 19.9655 26.0018 17.8688L24.9731 19.2845C28.6264 21.9392 33.73 21.1973 36.4764 17.6124L35.0872 16.5481ZM26.0057 17.8716C25.7303 17.6693 25.4706 17.4464 25.2288 17.2051L23.9926 18.4438C24.2966 18.7472 24.6231 19.0273 24.9692 19.2817L26.0057 17.8716Z" fill="currentColor"/>
<path d="M42.1462 34.9038V35.7788H43.0218L43.0212 34.9032L42.1462 34.9038ZM26.6136 23.9764C30.0641 22.9512 33.796 23.6146 36.6817 25.7661L37.7277 24.3632C34.3993 21.8816 30.0949 21.1165 26.1152 22.2988L26.6136 23.9764ZM36.6817 25.7661C39.5675 27.9176 41.2686 31.3049 41.2712 34.9044L43.0212 34.9032C43.0183 30.7515 41.0562 26.8447 37.7277 24.3632L36.6817 25.7661ZM42.1462 34.0288H30.7482V35.7788H42.1462V34.0288Z" fill="currentColor"/>
</svg>
{% endif %}
{% if id == 'icon-pin' %}
<svg {{ shared_svg_attrs }} width="34" height="44" viewBox="0 0 34 44" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.4563 17.2824C31.4563 27.2846 20.018 39.8633 17.4898 41.8101C17.201 42.0324 16.7987 42.0324 16.51 41.8101C13.9833 39.8649 2.54346 27.2846 2.54346 17.2824C2.54346 8.85589 8.57178 2.02283 16.9999 2.02283C25.428 2.02283 31.4563 8.85589 31.4563 17.2824Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9999 21.6834C19.8128 21.6834 22.0931 19.403 22.0931 16.5901C22.0931 13.7772 19.8128 11.4969 16.9999 11.4969C14.1869 11.4969 11.9066 13.7772 11.9066 16.5901C11.9066 19.403 14.1869 21.6834 16.9999 21.6834Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-model-thumb' %}
<svg {{ shared_svg_attrs }} width="26" height="26" viewBox="0 0 26 26">
<path d="M1,25H25V1H1Z" fill="none"/>
<path d="M19.13,8.28,14,5.32a2,2,0,0,0-2,0l-5.12,3a2,2,0,0,0-1,1.76V16a2,2,0,0,0,1,1.76l5.12,3a2,2,0,0,0,2,0l5.12-3a2,2,0,0,0,1-1.76V10A2,2,0,0,0,19.13,8.28Zm-6.4,11.1-5.12-3A.53.53,0,0,1,7.35,16V10a.53.53,0,0,1,.27-.46l5.12-3a.53.53,0,0,1,.53,0l5.12,3-4.72,2.68a1.33,1.33,0,0,0-.67,1.2v6a.53.53,0,0,1-.26,0Z" fill="currentColor" style="isolation:isolate"/>
</svg>
{% endif %}
{% if id == 'icon-play' %}
<svg {{ shared_svg_attrs }} width="61" height="61" viewBox="0 0 61 61" tabindex="-1">
<rect x="0.5" y="0.5" width="60" height="60" fill="none" stroke-miterlimit="10"/>
<path d="M25,21.39a1,1,0,0,0-1.51.86V38.64a1,1,0,0,0,1.55.83l13.11-8.67a1,1,0,0,0,0-1.7Z" fill="currentColor"/>
</svg>
{% endif %}
{% if id == 'icon-play-thumb' %}
<svg {{ shared_svg_attrs }} width="26" height="26" viewBox="0 0 26 26" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 25H25V1H1V25Z" fill="none"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.71814 6.71984C9.0517 6.31605 8.19995 6.79588 8.19995 7.5751V18.311C8.19995 19.1138 9.09826 19.5893 9.76217 19.1379L18.1123 13.4612C18.7146 13.0518 18.6912 12.1564 18.0682 11.779L9.71814 6.71984Z" fill="currentColor"/>
</svg>
{% endif %}
{% if id == 'icon-question-mark' %}
<svg {{ shared_svg_attrs }} width="42" height="44" viewBox="0 0 42 44" fill="none">
{{ icon_title }}
<path d="M14.4789 18.0735C14.4771 16.843 14.8232 15.6372 15.4774 14.595C16.1316 13.5529 17.0672 12.7169 18.1761 12.1837C19.285 11.6505 20.5221 11.4417 21.7446 11.5815C22.9671 11.7213 24.1251 12.2039 25.0851 12.9736C26.0451 13.7433 26.7678 14.7688 27.1699 15.9317C27.572 17.0946 27.6371 18.3475 27.3576 19.5458C27.0781 20.7441 26.4655 21.839 25.5904 22.704C24.7153 23.5691 23.6135 24.169 22.4121 24.4346C22.0179 24.5124 21.6625 24.7233 21.4054 25.032C21.1483 25.3407 21.0052 25.7284 21 26.1301V28.0656" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.9985 32.4734C21.2386 32.4734 21.4332 32.6681 21.4332 32.9082C21.4332 33.1483 21.2386 33.3429 20.9985 33.3429C20.7584 33.3429 20.5637 33.1483 20.5637 32.9082C20.5637 32.6681 20.7584 32.4734 20.9985 32.4734" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 42C32.0447 42 40.9981 33.0465 40.9981 22.0018C40.9981 10.9572 32.0447 2.00369 21 2.00369C9.95531 2.00369 1.00183 10.9572 1.00183 22.0018C1.00183 33.0465 9.95531 42 21 42Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-remove' %}
<svg {{ shared_svg_attrs }} width="10" height="10" viewBox="0 0 10 10" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.11611 5.00001L0.327286 8.78884L1.21117 9.67272L5 5.88389L8.78883 9.67272L9.67271 8.78884L5.88388 5.00001L9.67271 1.21118L8.78882 0.327301L5 4.11613L1.21117 0.327301L0.327286 1.21118L4.11611 5.00001Z" fill="currentColor"/>
</svg>
{% endif %}
{% if id == 'icon-rss' %}
<svg {{ shared_svg_attrs }} width="15" height="15" viewBox="0 0 15 15" fill="none">
{{ icon_title }}
<path d="M1 6.44443C3.00386 6.44443 4.92564 7.24046 6.34258 8.6574C7.75953 10.0743 8.55556 11.9961 8.55556 14" stroke="currentColor" stroke-width="2" stroke-linejoin="bevel"/>
<path d="M1 2C4.1826 2 7.23484 3.26428 9.48528 5.51472C11.7357 7.76516 13 10.8174 13 14" stroke="currentColor" stroke-width="2" stroke-linejoin="bevel"/>
<path d="M2.2875 12C2.72242 12 3.075 12.3526 3.075 12.7875C3.075 13.2224 2.72242 13.575 2.2875 13.575C1.85258 13.575 1.5 13.2224 1.5 12.7875C1.5 12.3526 1.85258 12 2.2875 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-menu' %}
<svg {{ shared_svg_attrs }} width="22" height="18" viewBox="0 0 22 18" fill="none">
{{ icon_title }}
<path d="M21 2H1" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M21 9H1" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M21 16H1" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-search' %}
<svg {{ shared_svg_attrs }} width="21" height="24" viewBox="0 0 21 24" fill="none">
{{ icon_title }}
<path d="M19.5 21.5L13.6155 15.1628" stroke="currentColor" stroke-width="1.75"/>
<circle cx="9.5" cy="9.5" r="7" stroke="currentColor" stroke-width="1.75"/>
</svg>
{% endif %}
{% if id == 'icon-search-close' %}
<svg {{ shared_svg_attrs }} width="18" height="18" viewBox="0 0 18 18" fill="none">
{{ icon_title }}
<path d="M17 1L1 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
<path d="M1 1L17 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-burger-close' %}
<svg {{ shared_svg_attrs }} width="18" height="18" fill="none">
{{ icon_title }}
<path d="M17 1L1 17M1 1l16 16" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-smile' %}
<svg {{ shared_svg_attrs }} width="42" height="44" viewBox="0 0 42 44" fill="none">
{{ icon_title }}
<path d="M14.9011 16.3368C15.1417 16.3368 15.3367 16.5318 15.3367 16.7724C15.3367 17.013 15.1417 17.208 14.9011 17.208C14.6605 17.208 14.4655 17.013 14.4655 16.7724C14.4655 16.5318 14.6605 16.3368 14.9011 16.3368" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9999 42.0391C32.0672 42.0391 41.039 33.0673 41.039 22C41.039 10.9327 32.0672 1.96088 20.9999 1.96088C9.93263 1.96088 0.960815 10.9327 0.960815 22C0.960815 33.0673 9.93263 42.0391 20.9999 42.0391Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.0988 16.3368C27.3394 16.3368 27.5345 16.5318 27.5345 16.7724C27.5345 17.013 27.3394 17.208 27.0988 17.208C26.8582 17.208 26.6632 17.013 26.6632 16.7724C26.6632 16.5318 26.8582 16.3368 27.0988 16.3368" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5448 26.3563C11.4048 28.4204 12.8566 30.1838 14.7172 31.4242C16.5778 32.6645 18.7639 33.3264 21 33.3264C23.2361 33.3264 25.4222 32.6645 27.2828 31.4242C29.1433 30.1838 30.5951 28.4204 31.4552 26.3563" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.9999 42.0391C32.0672 42.0391 41.039 33.0673 41.039 22C41.039 10.9327 32.0672 1.96088 20.9999 1.96088C9.93263 1.96088 0.960815 10.9327 0.960815 22C0.960815 33.0673 9.93263 42.0391 20.9999 42.0391Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-spinner' %}
<svg {{ shared_svg_attrs }} width="26" height="26" viewBox="0 0 26 26" fill="none">
{{ icon_title }}
<circle opacity="0.29" cx="13" cy="13" r="11" stroke="currentColor" stroke-width="2"/>
<path d="M24 13C24 19.0751 19.0751 24 13 24" stroke="currentColor" stroke-width="2"/>
</svg>
{% endif %}
{% if id == 'icon-store' %}
<svg {{ shared_svg_attrs }} width="46" height="44" viewBox="0 0 46 44" fill="none">
{{ icon_title }}
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.2864 2.9101C5.4577 2.91048 4.71527 3.40015 4.42025 4.1409L1.26139 12.0685C0.922764 12.9195 0.912845 13.8582 1.23342 14.7155C2.13633 17.1196 4.71514 18.5551 7.34639 18.1181C9.97765 17.6812 11.8998 15.4984 11.9028 12.9438C11.9028 15.8465 14.3628 18.1996 17.3974 18.1996C20.4319 18.1996 22.8919 15.8465 22.8919 12.9438C22.8919 15.8465 25.3519 18.1996 28.3864 18.1996C31.421 18.1996 33.881 15.8465 33.881 12.9438C33.884 15.4984 35.8061 17.6812 38.4374 18.1181C41.0686 18.5551 43.6475 17.1196 44.5504 14.7155C44.8714 13.8581 44.8607 12.9191 44.5204 12.0685L41.3635 4.1409C41.0685 3.40015 40.3261 2.91048 39.4974 2.9101L6.2864 2.9101Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.19455 23.9332V23.0582H8.31955V23.9332H9.19455ZM22.806 23.9332H23.681V23.0582H22.806V23.9332ZM22.806 35.4003V36.2753H23.681V35.4003H22.806ZM9.19455 35.4003H8.31955V36.2753H9.19455V35.4003ZM9.19455 24.8082H22.806V23.0582H9.19455V24.8082ZM21.931 23.9332V35.4003H23.681V23.9332H21.931ZM22.806 34.5253H9.19455V36.2753H22.806V34.5253ZM10.0695 35.4003V23.9332H8.31955V35.4003H10.0695Z" fill="currentColor"/>
<path d="M40.7887 18.2903L40.7881 40.7928C40.7881 40.8756 40.721 40.9428 40.6381 40.9428H5.05979C4.97695 40.9428 4.90979 40.8756 4.90979 40.7928L4.90983 18.291" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36.6237 41.0899V23.9151L26.9121 23.9151V41.0899" stroke="currentColor" stroke-width="1.75"/>
</svg>
{% endif %}
{% if id == 'icon-tap' %}
<svg {{ shared_svg_attrs }} width="17" height="18" fill="none" >
<g clip-path="url(#clip0)">
<path d="M10.5041 5.68411c.3161-.69947.3733-1.48877.1212-2.24947C10.1368 1.96048 8.60378.947266 6.86197.947266c-1.7418 0-3.27478 1.013214-3.76334 2.487374-.25211.7607-.19492 1.55.12117 2.24947" stroke="currentColor" stroke-width="1.18421" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.29826 12.9496l.4482-.3869-.00078-.0009-.44742.3878zm2.1109-1.6885l.44817-.387-.00075-.0009-.44742.3879zm2.14476 2.484l-.44817.387c.16167.1872.42273.2542.6546.168.23187-.0863.38567-.3076.38567-.555h-.5921zm2.745-2.9235h-.59211c0 .327.26509.5921.59211.5921v-.5921zm-1.6868 7.3776l-4.86566-5.6365-.896406.7738L5.71571 18.973l.89641-.7738zm-4.86644-5.6374c-.26238-.3027-.22472-.749.09904-1.008l-.73973-.9248c-.84206.6736-.962533 1.8912-.254153 2.7084l.894843-.7756zm.09904-1.008c.33763-.2701.84237-.2218 1.11702.0951l.89484-.7757c-.69611-.8031-1.92341-.90664-2.75159-.2442l.73973.9248zm1.11627.0942l2.14476 2.4841.89634-.7739-2.14476-2.4841-.89634.7739zm3.18503 2.0971V5.10805H4.96181v8.63705h1.18421zm0-8.63705c0-.379.32677-.72639.7804-.72639V3.19745c-1.0624 0-1.96461.83323-1.96461 1.9106h1.18421zm.7804-.72639c.45362 0 .78039.34739.78039.72639h1.18421c0-1.07737-.90221-1.9106-1.9646-1.9106v1.18421zm.78039.72639v5.71355h1.18421V5.10805H7.70681zm.59211 6.30565H11.273v-1.1842H8.29892v1.1842zm2.97408 0c1.717 0 3.0679 1.3312 3.0679 2.9239h1.1842c0-2.2911-1.9264-4.1081-4.2521-4.1081v1.1842zm3.0679 2.9239v4.6098h1.1842v-4.6098h-1.1842z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0">
<path fill="#fff" d="M0 0h16.6645v18H0z"/>
</clipPath>
</defs>
</svg>
{% endif %}
{% if id == 'icon-loading' %}
<svg {{ shared_svg_attrs }} width="77" height="77" viewBox="0 0 77 77" fill="none" tabindex="-1">
{{ icon_title }}
<ellipse opacity="0" cx="38.5" cy="38.5" rx="36.354" ry="36.354" stroke="currentColor" stroke-width="2"/>
<path d="M74.854 38.5C74.854 58.5777 58.5777 74.854 38.5 74.854" stroke="currentColor" stroke-width="2"/>
</svg>
{% endif %}
{% if id == 'icon-transfer' %}
<svg {{ shared_svg_attrs }} width="42" height="44" viewBox="0 0 42 44" fill="none">
{{ icon_title }}
<path d="M21 42.0837C32.0919 42.0837 41.0837 33.0919 41.0837 22C41.0837 10.9081 32.0919 1.91635 21 1.91635C9.90814 1.91635 0.916382 10.9081 0.916382 22C0.916382 33.0919 9.90814 42.0837 21 42.0837Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.1637 24.3117L29.3274 28.4754L25.1637 32.6391" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M29.3274 28.4754L12.6727 28.4754" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.8363 11.5237L12.6726 15.6874L16.8363 19.8511" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.6726 15.6874L29.3273 15.6874" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-wallet' %}
<svg {{ shared_svg_attrs }} width="44" height="44" viewBox="0 0 44 44" fill="none">
{{ icon_title }}
<path d="M2.38369 2.12199C1.91483 2.00494 1.43986 2.29013 1.3228 2.75899C1.20575 3.22784 1.49094 3.70282 1.9598 3.81988L2.38369 2.12199ZM23.0279 8.17792L23.2812 7.34038C23.2675 7.33624 23.2537 7.33244 23.2399 7.32897L23.0279 8.17792ZM27.587 14.0266H28.462C28.462 14.0082 28.4614 13.9899 28.4602 13.9716L27.587 14.0266ZM5.50396 32.3632L5.27591 33.2079C5.28634 33.2107 5.29681 33.2134 5.30733 33.2158L5.50396 32.3632ZM1.9598 3.81988L22.816 9.02686L23.2399 7.32897L2.38369 2.12199L1.9598 3.81988ZM22.7746 9.01546C24.6337 9.57765 25.4554 10.0187 25.9135 10.616C26.3779 11.2216 26.5917 12.144 26.7137 14.0816L28.4602 13.9716C28.3405 12.0707 28.1294 10.6297 27.3021 9.551C26.4685 8.46406 25.1315 7.89993 23.2812 7.34038L22.7746 9.01546ZM5.73201 31.5184C3.74467 30.9819 2.86181 30.4679 2.40789 29.8515C1.95089 29.2309 1.79167 28.3283 1.79167 26.5773H0.0416718C0.0416718 28.3115 0.166749 29.7593 0.998727 30.8892C1.83378 32.0232 3.24456 32.6595 5.27591 33.2079L5.73201 31.5184ZM1.79167 26.5773V6.18235H0.0416718V26.5773H1.79167ZM1.79167 6.18235C1.79167 4.55188 1.95965 3.69368 2.38678 3.19214C2.78131 2.72888 3.60498 2.35083 5.62319 2.35083V0.60083C3.50992 0.60083 1.98033 0.970332 1.05447 2.05748C0.161211 3.10635 0.0416718 4.6014 0.0416718 6.18235H1.79167ZM5.62319 2.35083H32.2935V0.60083H5.62319V2.35083ZM32.2935 2.35083C33.2503 2.35083 33.9576 2.39333 34.4918 2.50126C35.0168 2.60733 35.3068 2.76358 35.4915 2.94301C35.6748 3.12114 35.8399 3.40522 35.9553 3.93145C36.073 4.46799 36.125 5.19104 36.125 6.18235H37.875C37.875 5.1554 37.8235 4.28101 37.6647 3.55665C37.5036 2.82198 37.2193 2.18171 36.7108 1.68778C36.2037 1.19514 35.5595 0.931617 34.8384 0.785919C34.1264 0.642076 33.2758 0.60083 32.2935 0.60083V2.35083ZM18.8098 34.5337L5.70059 31.5105L5.30733 33.2158L18.4166 36.239L18.8098 34.5337ZM26.712 14.0266V19.7594H28.462V14.0266H26.712ZM36.125 6.18235V19.248H37.875V6.18235H36.125Z" fill="currentColor"/>
<path d="M27.5932 10.817C27.11 10.817 26.7182 11.2088 26.7182 11.692C26.7182 12.1753 27.11 12.567 27.5932 12.567V10.817ZM27.5932 12.567H33V10.817H27.5932V12.567Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.5 43C38.299 43 43 38.299 43 32.5C43 26.701 38.299 22 32.5 22C26.701 22 22 26.701 22 32.5C22 38.299 26.701 43 32.5 43Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34.828 28.431H33.953H34.828ZM30.172 28.431H31.047H30.172ZM35.703 28.431C35.703 27.2867 35.0925 26.2293 34.1015 25.6571L33.2265 27.1727C33.6761 27.4322 33.953 27.9119 33.953 28.431H35.703ZM34.1015 25.6571C33.1105 25.085 31.8895 25.085 30.8985 25.6571L31.7735 27.1727C32.2231 26.9131 32.7769 26.9131 33.2265 27.1727L34.1015 25.6571ZM30.8985 25.6571C29.9075 26.2293 29.297 27.2867 29.297 28.431H31.047C31.047 27.9119 31.3239 27.4322 31.7735 27.1727L30.8985 25.6571ZM29.297 28.431V28.779H31.047V28.431H29.297ZM33.953 28.431V28.779H35.703V28.431H33.953Z" fill="currentColor"/>
<path d="M32.5 33.3197C32.7531 33.3197 32.9583 33.5249 32.9583 33.778C32.9583 34.0311 32.7531 34.2363 32.5 34.2363C32.2469 34.2363 32.0417 34.0311 32.0417 33.778C32.0417 33.5249 32.2469 33.3197 32.5 33.3197" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3095 31.2439C28.3095 30.6916 28.7572 30.2439 29.3095 30.2439H35.6905C36.2428 30.2439 36.6905 30.6916 36.6905 31.2439V36.5772C36.6905 37.1295 36.2428 37.5772 35.6905 37.5772H32.5H29.3095C28.7572 37.5772 28.3095 37.1295 28.3095 36.5772V31.2439Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-zoom' %}
<svg {{ shared_svg_attrs }} width="13" height="14" viewBox="0 0 13 14" fill="none">
{{ icon_title }}
<path d="M7.8 8.77502L12.025 13.325" stroke="currentColor" stroke-width="1.25"/>
<circle cx="5.19999" cy="5.52498" r="4.55" stroke="currentColor" stroke-width="1.25"/>
<path d="M5.2 3.32001V7.72" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
<path d="M3 5.52002H7.39999" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-check-circle' %}
<svg width="13" height="13" viewBox="0 0 13 13" fill="none">
{{ icon_title }}
<path d="M3.5 6.43688L5.62488 8.56188C6.90372 6.99748 10.9823 2.25069 12 1" stroke="currentColor" stroke-width="1.25"/>
<path d="M10.8744 5.88869C11.3941 8.16809 10.2647 10.5033 8.15522 11.5112C6.04571 12.5191 3.51938 11.9305 2.0725 10.0942C0.625616 8.25777 0.644548 5.6639 2.11808 3.84882C3.59161 2.03375 6.12627 1.48215 8.22083 2.52073" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{% endif %}
{% if id == 'icon-3D' %}
<svg {{ shared_svg_attrs }} viewBox="0 0 60 60"><path fill="currentColor" d="M40.4 22.57l-8.8-5.14a3.19 3.19 0 00-3.21 0l-8.8 5.14A3.24 3.24 0 0018 25.36v10.28a3.23 3.23 0 001.6 2.79l8.8 5.14a3.2 3.2 0 003.21 0l8.8-5.14A3.23 3.23 0 0042 35.64V25.36a3.24 3.24 0 00-1.6-2.79zM20.6 36.7a1.23 1.23 0 01-.6-1.06V25.36a1.23 1.23 0 01.6-1.06l8.8-5.14a1.19 1.19 0 011.19 0l8.8 5.14a1.2 1.2 0 01.36.34l-9.51 4.89a2.23 2.23 0 00-1.25 2V41.6z"/></svg>
{% endif %}
{%- endcapture -%}
{{ icon | strip_newlines }}添加以下代码到主题样式文件，例如 theme.css
/* Highlights Banners */
@media screen and (max-width: 500px) {
.highlights-banners-container{
display: none;
}
}
.highlights-banners-container {
max-width: 100vw;
/* padding-right: 10px;
padding-left: 10px; */
margin-right: auto;
margin-left: auto;
}
/* @media screen and (max-width: 1079px) and (min-width: 720px) {
.highlights-banners-container{
padding-right: 1.75rem;
padding-left: 1.75rem;
}
} */
/* @media screen and (min-width: 1080px) {
.highlights-banners-container{
padding-right: 40px;
padding-left: 40px;
}
} */
.highlights-banners {
position: relative;
display: flex;
justify-content: center;
padding: 1.25rem 0;
outline: 0;
}
.highlights-banners .flickity-slider {
height: 100%;
display: flex;
align-items: center;
}
.highlights-banners:before, .highlights-banners:after {
position: absolute;
top: 0;
right: calc(100% - 20px);
bottom: 0;
left: 0;
z-index: 2;
content: '';
}
.highlights-banners:after {
right: 0;
left: calc(100% - 20px);
}
@media screen and (max-width: 1023px) {
.highlights-banners {
overflow: hidden;
}
}
@media screen and (min-width: 1024px) {
.highlights-banners {
height: auto;
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.highlights-banners:before, .highlights-banners:after {
display: none;
}
}
.highlights-banners-block {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: 0 1.25rem;
color: #4D4D4D;
text-decoration: none;
}
.highlight-banners-align-center .highlights-banners-block {
flex-direction: column;
justify-content: center;
text-align: center;
}
.highlight-banners-align-right .highlights-banners-block {
justify-content: flex-end;
text-align: right;
}
@media screen and (max-width: 1023px) {
.highlights-banners-block {
max-width: 17.1875rem;
min-width: 12.5rem;
height: auto;
}
.flickity-slider .highlights-banners-block {
top: 0;
}
.highlight-banners-count-2 .highlights-banners-block {
width: 50%;
}
.highlight-banners-count-3 .highlights-banners-block {
width: 33%;
}
.highlight-banners-count-4 .highlights-banners-block {
width: 25%;
}
}
@media screen and (min-width: 1024px) {
.highlight-banners-count-2 .highlights-banners-block,
.highlight-banners-count-3 .highlights-banners-block {
width: 33%;
max-width: 21.25rem;
}
.highlight-banners-count-4 .highlights-banners-block {
width: 25%;
}
}
.highlights-banners-block:not(:last-of-type)::after {
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
content: "";
}
.highlights-banners-icon {
width: auto;
height: 2.25rem;
margin-right: 1rem;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
@media screen and (min-width: 680px) {
.highlights-banners-icon {
height: 2.5rem;
}
}
@media screen and (min-width: 1024px) {
.highlights-banners-icon {
height: 2.875rem;
margin-right: 1.25rem;
}
}
.highlights-banners-icon svg {
height: 100%;
max-width: 3.75rem;
}
.highlights-banners-icon .highlights-banners-custom-icon {
width: auto;
height: 100%;
}
.highlight-banners-align-center .highlights-banners-icon {
margin-right: 0;
margin-bottom: 0.75rem;
}
@media screen and (min-width: 1024px) {
.highlight-banners-align-center .highlights-banners-icon {
margin-bottom: 1rem;
}
}
.highlight-banners-align-right .highlights-banners-icon {
margin-right: 0;
margin-left: 1.25rem;
}
.highlights-banners-text {
font-size: var(--font-size-body-smaller);
max-width: 100%;
line-height: 1.4;
}
.highlights-banners-text p {
margin: 0;
}
@media screen and (min-width: 1024px) {
.highlights-banners-text {
font-size: var(--font-size-body);
}
}
.highlights-banners-text a {
position: relative;
z-index: 1;
color: inherit;
text-decoration: underline;
}
.highlights-banners-heading {
/* font-size: var(--font-size-highlight-banner-heading);
font-family: {{ fonts_type_highlights_bar_family }};
font-style: {{ fonts_type_highlights_bar_style }};
font-weight: {{ fonts_type_highlights_bar_weight }}; */
letter-spacing: {{ settings.type_highlights_spacing | divided_by: 100.0 | append: 'em' }};
margin: 0;
}
{%- if settings.type_highlights_capitalize -%}
.highlights-banners-heading {
text-transform: uppercase;
}
{%- else -%}
.highlights-banners-heading {
text-transform: none;
}
{%- endif -%}
.highlights-banners-block-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}