{% comment %}
  Renders a SVG icon.

  Accepts:
  - name: {String} Name of the icon to render. Default: "arrow" (optional)
  - icon_size: {Number} Size of the icon. Default: 20 (optional)
  - color: {String} Color of the loader. Default: "currentColor" (optional)

  Usage:
  {% render 'icon',
    name: 'arrow',
    icon_size: '20',
    color: "#000",
  %}
{% endcomment %}

{% liquid
  assign size = icon_size | default: '20'
  assign color = color | default: 'currentColor'
  assign class = class

  case name
    when '3d-model'
      render 'icon-3d-model', size: size, color: color
    when '360'
      render 'icon-360', size: size, color: color
    when 'account'
      render 'icon-account', size: size, color: color
    when 'arrow'
      render 'icon-arrow', size: size, color: color
    when 'author'
      render 'icon-author', size: size, color: color
    when 'icon-arrow-short-below'
      render 'icon-arrow-short-below', size: size, color: color
    when 'bestsell'
      render 'icon-bestsell', size: size, color: color
    when 'chevron-up'
      render 'icon-chevron-up', size: size, color: color
    when 'chevron-down'
      render 'icon-chevron-down', size: size, color: color
    when 'chevron-left'
      render 'icon-chevron-left', size: size, color: color
    when 'chevron-right'
      render 'icon-chevron-right', size: size, color: color
    when 'cart-empty'
      render 'icon-cart-empty', size: size, color: color
    when 'cart'
      render 'icon-cart', size: size, color: color
    when 'check'
      render 'icon-check', size: size, color: color
    when 'check2'
      render 'icon-check2', size: size, color: color
    when 'checkmark'
      render 'icon-checkmark', size: size, color: color
    when 'clipboard'
      render 'icon-clipboard', size: size, color: color
    when 'clock'
      render 'icon-clock', size: size, color: color
    when 'comment'
      render 'icon-comment', size: size, color: color
    when 'comment2'
      render 'icon-comment2', size: size, color: color
    when 'close-small'
      render 'icon-close-small', size: size, color: color
    when 'close'
      render 'icon-close', size: size, color: color
    when 'compare'
      render 'icon-compare', size: size, color: color
    when 'discount'
      render 'icon-discount', size: size, color: color
    when 'error'
      render 'icon-error', size: size, color: color
    when 'eye'
      render 'icon-eye', size: size, color: color
    when 'facebook'
      render 'icon-facebook', size: size, color: color
    when 'facebook2'
      render 'icon-facebook2', size: size, color: color
    when 'filter'
      render 'icon-filter', size: size, color: color
    when 'filter2'
      render 'icon-filter2', size: size, color: color
    when 'filter3'
      render 'icon-filter3', size: size, color: color
    when 'fire'
      render 'icon-fire', size: size, color: color
    when 'google-plus'
      render 'icon-google-plus', size: size, color: color
    when 'hamburger'
      render 'icon-hamburger', size: size, color: color
    when 'instagram'
      render 'icon-instagram', size: size, color: color
    when 'instagram2'
      render 'icon-instagram2', size: size, color: color
    when 'minus'
      render 'icon-minus', size: size, color: color
    when 'padlock'
      render 'icon-padlock', size: size, color: color
    when 'pause'
      render 'icon-pause', size: size, color: color
    when 'pinterest'
      render 'icon-pinterest', size: size, color: color
    when 'pinterest2'
      render 'icon-pinterest2', size: size, color: color
    when 'play'
      render 'icon-play', size: size, color: color
    when 'play2'
      render 'icon-play2', size: size, color: color
    when 'plus'
      render 'icon-plus', size: size, color: color
    when 'plus2'
      render 'icon-plus2', size: size, color: color
    when 'remove'
      render 'icon-remove', size: size, color: color
    when 'upload'
      render 'icon-upload', size: size, color: color
    when 'return'
      render 'icon-return', size: size, color: color
    when 'share'
      render 'icon-share', size: size, color: color
    when 'snapchat'
      render 'icon-snapchat', size: size, color: color
    when 'success'
      render 'icon-success', size: size, color: color
    when 'tick'
      render 'icon-tick', size: size, color: color
    when 'tiktok'
      render 'icon-tiktok', size: size, color: color
    when 'tumblr'
      render 'icon-tumblr', size: size, color: color
    when 'twitter'
      render 'icon-twitter', size: size, color: color
    when 'twitter2'
      render 'icon-twitter2', size: size, color: color
    when 'unavailable'
      render 'icon-unavailable', size: size, color: color
    when 'vimeo'
      render 'icon-vimeo', size: size, color: color
    when 'youtube'
      render 'icon-youtube', size: size, color: color
    when 'zoom'
      render 'icon-zoom', size: size, color: color
    when 'search'
      render 'icon-search', size: size, color: color
    when 'shipping-fast'
      render 'icon-shipping-fast', size: size, color: color
    when 'phone-call'
      render 'icon-phone-call', size: size, color: color
    when 'trash'
      render 'icon-trash', size: size, color: color
    when 'empty'
      render 'icon-empty', size: size, color: color
    when 'note'
      render 'icon-note', size: size, color: color
    when 'estimate-shipping-rates'
      render 'icon-estimate-shipping-rates', size: size, color: color
    when 'star'
      render 'icon-star', size: size, color: color
    when 'star2'
      render 'icon-star2', size: size, color: color
    when 'star-style2'
      render 'icon-star-style2', size: size, color: color
    when 'star-style3'
      render 'icon-star-style3', size: size, color: color
    when 'arrow-right'
      render 'icon-arrow-right', size: size, color: color
    when 'arrow-right2'
      render 'icon-arrow-right2', size: size, color: color
    when 'arrow-right3'
      render 'icon-arrow-right3', size: size, color: color
    when 'arrow-left'
      render 'icon-arrow-left', size: size, color: color
    when 'arrow-left2'
      render 'icon-arrow-left2', size: size, color: color
    when 'arrow-left3'
      render 'icon-arrow-left3', size: size, color: color
    when 'horizontal'
      render 'icon-horizontal', size: size, color: color
    when 'heart'
      render 'icon-heart', size: size, color: color
    when 'more'
      render 'icon-more', size: size, color: color
    when 'caret-right'
      render 'icon-caret-right', size: size, color: color
    when 'caret-left'
      render 'icon-caret-left', size: size, color: color
    when 'caret-down'
      render 'icon-caret-down', size: size, color: color
    when 'arrow-long'
      render 'icon-arrow-long', size: size, color: color
    when 'comma'
      render 'icon-comma', size: size, color: color
    when 'comma2'
      render 'icon-comma2', size: size, color: color
    when 'email'
      render 'icon-email', size: size, color: color, class: class
    when 'column-layout'
      render 'icon-column-layout', size: size, color: color
    when 'account1'
      render 'icon-account1', size: size, color: color
    when 'location'
      render 'icon-location', size: size, color: color
    when 'lightning'
      render 'icon-lightning', size: size, color: color
    when 'phone'
      render 'icon-phone', size: size, color: color
    when 'phone1'
      render 'icon-phone1', size: size, color: color
    when 'ig-color'
      render 'icon-instagram-color', size: size, color: color
    when 'hamburger1'
      render 'icon-menu-hamburger', size: size, color: color
    when 'account2'
      render 'icon-account2', size: size, color: color
    when 'account3'
      render 'icon-account3', size: size, color: color
    when 'cart1'
      render 'icon-cart1', size: size, color: color
    when 'cart2'
      render 'icon-cart2', size: size, color: color
    when 'heart1'
      render 'icon-heart1', size: size, color: color
    when 'heart2'
      render 'icon-heart2', size: size, color: color
    when 'search2'
      render 'icon-search2', size: size, color: color
    when 'close2'
      render 'icon-close2', size: size, color: color
    when 'smile'
      render 'icon-smile', size: size, color: color
    when 'order'
      render 'icon-order', size: size, color: color
    when 'coupon'
      render 'icon-coupon', size: size, color: color
    when 'shipping'
      render 'icon-shipping', size: size, color: color
    when 'square-check'
      render 'icon-square-check', size: size, color: color
    when 'search3'
      render 'icon-search3', size: size, color: color
    when 'search1'
      render 'icon-search1', size: size, color: color
    when 'location1'
      render 'icon-location1', size: size, color: color
    when 'phone2'
      render 'icon-phone2', size: size, color: color
    when 'email2'
      render 'icon-email2', size: size, color: color
    when 'boxed'
      render 'icon-boxed', size: size, color: color
    when 'truck'
      render 'icon-truck', size: size, color: color
    when 'ruler'
      render 'icon-ruler', size: size, color: color
    when 'color-circle'
      render 'icon-color-circle', size: size, color: color
    when 'ask'
      render 'icon-ask', size: size, color: color
    when 'fax'
      render 'icon-fax', size: size, color: color
    when 'shop'
      render 'icon-shop', size: size, color: color
    when 'image-compare1'
      render 'icon-image-compare1', size: size, color: color
    when 'calendar'
      render 'icon-calendar', size: size, color: color
    when 'shopify'
      render 'icon-shopify', size: size, color: color
    else
      render 'icon-arrow', size: size, color: color
  endcase
%}
