{%- liquid
assign icon_class = 'icon ' | append: class | strip
assign icon_stroke_width = settings.icons_stroke_width | times: 1.0
assign icon_corner_shape = settings.icons_corner_shape
-%}
{%- capture icon -%}
{%- case icon_name -%}
{%- when 'theme-3d-model' -%}
{%- when 'theme-bag' -%}
{%- when 'theme-bag-add' -%}
{%- when 'theme-cart' -%}
{%- when 'theme-compare' -%}
{%- when 'theme-arrow' -%}
{%- when 'theme-check' -%}
{%- when 'theme-check-small' -%}
{%- when 'theme-check-circle' -%}
{%- when 'theme-chevron' -%}
{%- when 'theme-chevron-small' -%}
{%- when 'theme-chevron-down' -%}
{%- when 'theme-close' -%}
{%- when 'theme-close-small' -%}
{%- when 'theme-delete' -%}
{%- comment -%}no stroke width{%- endcomment -%}
{%- when 'theme-drag' -%}
{%- when 'theme-expand' -%}
{%- when 'theme-filter' -%}
{%- when 'theme-heart' -%}
{%- when 'theme-heart-filled' -%}
{%- when 'theme-info-circle' -%}
{%- when 'theme-lock' -%}
{%- when 'theme-menu' -%}
{%- when 'theme-minus' -%}
{%- when 'theme-package' or 'theme-box' -%}
{%- when 'theme-package-check' -%}
{%- when 'theme-pause' -%}
{%- when 'theme-play' -%}
{%- when 'theme-pin' -%}
{%- when 'theme-paper-plane' -%}
{%- when 'theme-phone' -%}
{%- when 'theme-plus' -%}
{%- when 'theme-sale-tag' -%}
{%- comment -%}no stroke width{%- endcomment -%}
{%- when 'theme-return' -%}
{%- when 'theme-search' -%}
{%- when 'theme-share' -%}
{%- when 'theme-star' -%}
{%- when 'theme-star-half' -%}
{%- when 'theme-star-filled' -%}
{%- when 'theme-timer' -%}
{%- comment -%}no stroke width{%- endcomment -%}
{%- when 'theme-user' -%}
{%- when 'theme-video' -%}
{%- when 'theme-error' or 'theme-warning'-%}
{%- when 'theme-zoom-in'-%}
{%- when 'theme-zoom-out'-%}
{%- comment -%}BRAND ICONS{%- endcomment -%}
{%- when 'brand-appstore' -%}
{%- when 'brand-discord' -%}
{%- when 'brand-facebook' -%}
{%- when 'brand-google-play-store' -%}
{%- when 'brand-instagram' -%}
{%- when 'brand-linkedin' -%}
{%- when 'brand-linktree' -%}
{%- when 'brand-medium' -%}
{%- when 'brand-messenger' -%}
{%- comment -%}update{%- endcomment -%}
{%- when 'brand-pinterest' -%}
{%- when 'brand-rss' -%}
{%- when 'brand-snapchat' -%}
{%- when 'brand-spotify' -%}
{%- when 'brand-telegram' -%}
{%- when 'brand-threads' -%}
{%- when 'brand-tiktok' -%}
{%- when 'brand-vimeo' -%}
{%- when 'brand-whatsapp' -%}
{%- when 'brand-x' or 'brand-twitter' -%}
{%- when 'brand-youtube' -%}
{%- comment -%}EXTRA ICONS{%- endcomment -%}
{%- when 'option-cookies' -%}
{%- comment -%}no stroke width{%- endcomment -%}
{%- when 'option-discount' -%}
{%- when 'option-world'-%}
{%- comment -%}update{%- endcomment -%}
{%- when 'option-apple' -%}
{%- when 'option-banana' -%}
{%- when 'option-bottle' -%}
{%- when 'option-box' -%}
{%- when 'option-carrot' -%}
{%- when 'option-chat_bubble' -%}
{%- when 'option-check_mark' -%}
{%- when 'option-clipboard' -%}
{%- when 'option-dairy' -%}
{%- when 'option-dairy_free' -%}
{%- when 'option-dryer' -%}
{%- when 'option-eye' -%}
{%- when 'option-fire' -%}
{%- when 'option-gluten_free' -%}
{%- when 'option-heart' -%}
{%- when 'option-iron' -%}
{%- when 'option-leaf' -%}
{%- when 'option-leather' -%}
{%- when 'option-lightning_bolt' -%}
{%- when 'option-lipstick' -%}
{%- when 'option-lock' -%}
{%- when 'option-map_pin' -%}
{%- when 'option-nut_free' -%}
{%- when 'option-pants' -%}
{%- when 'option-paw_print' -%}
{%- when 'option-pepper' -%}
{%- when 'option-perfume' -%}
{%- when 'option-plane' -%}
{%- when 'option-plant' -%}
{%- when 'option-price_tag' -%}
{%- when 'option-question_mark' -%}
{%- when 'option-recycle' -%}
{%- when 'option-return' -%}
{%- when 'option-ruler' -%}
{%- when 'option-serving_dish' -%}
{%- when 'option-shirt' -%}
{%- when 'option-shoe' -%}
{%- when 'option-silhouette' -%}
{%- when 'option-snowflake' -%}
{%- when 'option-star' -%}
{%- when 'option-stopwatch' -%}
{%- when 'option-truck' -%}
{%- when 'option-washing' -%}
{%- endcase -%}
{%- endcapture -%}
{% liquid
assign icon_class = ''
if text or text != blank
assign icon_class = 'icon-with-text' | append: ' ' | append: class
elsif class
assign icon_class = 'icon' | append: ' ' | append: class | replace_last: ' icon', ''
endif
assign custom_icon = custom_icon | default: false
%}
{%- if custom_icon -%}
{%- assign icon_alt = icon_alt | default: nil -%}
{%- if class -%}{%- endif -%}
{{ custom_icon | image_url: width: 24 | image_tag: alt: icon_alt }}
{%- if class -%}{%- endif -%}
{%- else -%}
{%- if text or text != blank -%}
{{ icon }}
{{ text }}
{%- else -%}
{%- if class -%}{%- endif -%}
{{ icon }}
{%- if class -%}{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- comment -%}
Renders SVG Icon Element with optional text
Parameters:
- icon_name: required, name of the icon to render
- text: string, optional, text to display next to the icon
- class: string, optional, additional classes to add to the icon element
Important:
- If you want to add predefined styling to the icon:
-- for icon only, you should use the class parameter with 'icon'.
-- for icon with text, you should use the class parameter with 'icon-with-text'.
Usage Types:
- icon_name: 'brand-facebook'
- icon_name: 'brand-instagram', class: 'icon custom-class'
- icon_name: 'brand-x', text: 'X', class: 'icon-with-text custom-class'
{%- endcomment -%}