SVGアイコン表示

{% comment %}
  Renders a different SVG icon based on https://iconsvg.xyz

  Accepts:
  - icon: {String} The icon name, e.g. cart, account, search
  - size: {Number} (Optional) The icon size (default is 22)
  - stroke_width: {Number} (Optional) The icon stroke width (default is 2)
  - class: {String} (Optional) An optional class to apply to the SVG element

  Usage:
  {% render 'svg-icons' icon: 'menu', size: 24, stroke_width: 2, class: "m-3"  %}
{% endcomment %}

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  width="{{ size | default: 22 }}" 
  height="{{ size | default: 22 }}" 
  class="{{ 'svg-icon-' | append: icon }} {{ class }}"
  viewBox="0 0 24 24" 
  fill="none" 
  stroke="currentColor" 
  stroke-width="{{ stroke_width | default: 2 }}" 
  stroke-linecap="round" 
  stroke-linejoin="round">
  {% case icon %}
    {% when 'cart' %}
      {% if settings.cart_icon == 'cart' %}
        <circle cx="10" cy="20.5" r="1"/><circle cx="18" cy="20.5" r="1"/><path d="M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1"/>
      {% elsif settings.cart_icon == 'bag' %}
        <path d="M6 2L3 6v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V6l-3-4H6zM3.8 6h16.4M16 10a4 4 0 1 1-8 0"/>
      {% endif %}
    {% when 'menu' %}
      <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
    {% when 'account' %}
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
    {% when 'search' %}
      <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    {% when 'heart' %}
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    {% when 'recently-viewed' %}
      <path d="M2.5 2v6h6M2.66 15.57a10 10 0 1 0 .57-8.38"/>
    {% when 'x' %}
      <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
    {% when 'more' %}
      <circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle>
    {% when 'minus' %}
      <line x1="5" y1="12" x2="19" y2="12"></line>
    {% when 'plus' %}
      <line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
    {% when 'alert-circle' %}
      <circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line>
    {% when 'remove' %}
      <polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line>
    {% when 'lock' %}
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
    {% when 'truck' %}
      <rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle>
    {% when 'gift' %}
      <polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
    {% when 'maximize' %}
      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
    {% when 'arrow-top' %}
      <path d="M12 19V6M5 12l7-7 7 7"/>
    {% when 'arrow-bottom' %}
      <path d="M12 5v13M5 12l7 7 7-7"/>
    {% when 'arrow-left' %}
      <path d="M19 12H6M12 5l-7 7 7 7"/>
    {% when 'arrow-right' %}
      <path d="M5 12h13M12 5l7 7-7 7"/>
    {%  when 'chevron-left' %}
      <path d="M15 18l-6-6 6-6"/>
    {%  when 'chevron-right' %}
      <path d="M9 18l6-6-6-6"/>
    {%  when 'chevron-up' %}
      <path d="M18 15l-6-6-6 6"/>
    {%  when 'chevron-down' %}
      <path d="M6 9l6 6 6-6"/>
    {% when 'filter' %}
      <line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line>
    {% when 'tag' %}
      <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line>
    {% when 'mail' %}
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline>
    {% when 'star' %}
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
    {% when 'play' %}
      <polygon points="5 3 19 12 5 21 5 3" fill="currentColor"></polygon>
    {% when 'phone' %}
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
    {% when 'edit' %}
      <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon>
    {% when 'time' %}
      <circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline>
  {% endcase %}
</svg>