SVG library snippet with associated SVG snippet

svg-cross.liquid

<svg {{ class_attribute }} viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" {{ style_attribute }}>
  <path d="M 45 5 L 5 45 M 5 5 L 45 45"></path>
</svg>

svg-library.liquid

{% comment %}
  Renders a SVG from the code provided

  Accepts:
    - svg {string} - The SVG code to render
    - class {string} - CSS classes to add to the SVG element (Optional)
    - style {string} - CSS styles to add to the SVG element (Optional)

  Usage:
    {% render 'mx-svg-library', svg: 'svg-code' %}
{% endcomment %}

{% liquid
  assign class_attribute = ''
  if class != blank
    assign class_attribute = 'class="' | append: class | append: '"'
  endif

  assign style_attribute = ''
  if style != blank
    assign style_attribute = 'style="' | append: style | append: '"'
  endif

  case svg
    when 'cross'
      render 'svg-cross', class_attribute: class_attribute, style_attribute: style_attribute
    when 'arrow'
      render 'svg-arrow', class_attribute: class_attribute, style_attribute: style_attribute
    when 'chevron'
      render 'svg-chevron', class_attribute: class_attribute, style_attribute: style_attribute
    when 'hamburger'
      render 'svg-hamburger', class_attribute: class_attribute, style_attribute: style_attribute
    when 'plus'
      render 'svg-plus', class_attribute: class_attribute, style_attribute: style_attribute
    when 'minus'
      render 'svg-minus', class_attribute: class_attribute, style_attribute: style_attribute
    when 'account'
      render 'svg-account', class_attribute: class_attribute, style_attribute: style_attribute
    when 'magnifying-glass'
      render 'svg-magnifying-glass', class_attribute: class_attribute, style_attribute: style_attribute
    when 'shopping-bag'
      render 'svg-shopping-bag', class_attribute: class_attribute, style_attribute: style_attribute
    else
      echo "<span style='color: red'>Invalid 'mx-svg-library' svg ID provided: " | append: svg | append: '</span>'
  endcase
%}