Shopify Liquid Filter для вставки файла SVG прямо в HTML?

Question

Есть ли фильтр для прикрепления файла SVG прямо в HTML файла Liquid? Я хочу иметь возможность манипулировать стилем SVG с помощью CSS, что я не могу сделать, если я установлю SRC для IMG.

Например, что-то подобное возможно с Shopify Liquid:

{{ 'file.svg' | file_url | svg_filter }}

компилируется в

<svg>blablalba</svg>

Answer 1

Я бы порекомендовал вместо этого поместить все ваши svgs в один файл с жидким фрагментом, например:

<!-- snippets/icon.liquid -->
<span class="icon icon-{{ icon }}" aria-hidden="true">
  <svg xmlns="http://www.w3.org/2000/svg" {%- if title != blank %}aria-label="{{ title }}"{% endif %} role="img" width="{{ size | default: 16 }}px" height="{{ size | default: 16 }}px" viewBox="{{ viewbox | default: '0 0 16 16' }}">
    {%- case icon -%}
      {%- when 'down' -%}
        <path class="stroke" d="M11.25 6.75l-3.5 3.5-3.5-3.5"/>
      {%- when 'chevron' -%}
        <path class="stroke" d="M1 0l7.875 8L1 16"/>
      {%- when 'location' -%}
        <g class="fill">
          <path d="M8 4.23c-.919 0-1.667.725-1.667 1.616 0 .89.748 1.616 1.667 1.616s1.667-.725 1.667-1.616c0-.89-.748-1.615-1.667-1.615zM8 7c-.656 0-1.19-.518-1.19-1.154 0-.636.534-1.154 1.19-1.154.656 0 1.191.518 1.191 1.154C9.191 6.482 8.656 7 8.001 7z"/>
          <path d="M11.537 2.436A5.022 5.022 0 0 0 8 1c-1.337 0-2.592.51-3.537 1.436C2.717 4.15 2.5 7.373 3.994 9.327L8.001 15l4-5.665c1.5-1.962 1.283-5.185-.464-6.899zm.04 6.6l-3.576 5.066L4.417 9.03c-1.355-1.773-1.161-4.684.416-6.231a4.5 4.5 0 0 1 3.168-1.286 4.5 4.5 0 0 1 3.167 1.286c1.577 1.547 1.772 4.458.41 6.238z"/>
        </g>
      {%- when 'phone' -%}
        <path class="fill" d="M12.555 15.5c-.626 0-1.38-.158-2.207-.47-1.818-.685-3.793-2.037-5.567-3.811C3.007 9.446 1.652 7.467.967 5.652.344 3.999.344 2.642.965 2.02c.089-.089.18-.185.274-.283C1.805 1.142 2.445.47 3.293.5c.586.025 1.153.389 1.732 1.111 1.714 2.13.94 2.892.046 3.771l-.157.158c-.145.145-.424.823 2.15 3.394.838.84 1.555 1.454 2.126 1.826.36.234 1.005.588 1.269.325l.16-.16c.879-.894 1.638-1.663 3.768.05.722.58 1.087 1.145 1.109 1.731.035.847-.64 1.49-1.237 2.056-.098.094-.194.185-.283.274-.308.308-.8.463-1.421.463zM3.234 1.006c-.604 0-1.148.571-1.631 1.079-.096.103-.19.202-.283.293-.461.463-.414 1.678.12 3.097.66 1.75 1.973 3.665 3.698 5.387 1.724 1.724 3.636 3.037 5.387 3.697 1.419.535 2.633.582 3.094.119.094-.092.192-.185.294-.282.52-.492 1.105-1.051 1.08-1.67-.017-.426-.327-.881-.921-1.359-1.773-1.426-2.27-.924-3.094-.089l-.162.163c-.395.394-1.032.308-1.9-.256-.603-.392-1.344-1.03-2.209-1.892C4.571 7.157 3.89 5.852 4.557 5.18l.162-.157c.838-.823 1.342-1.32-.086-3.097-.478-.593-.936-.904-1.36-.92h-.04z"/>
...

Затем вы можете назвать его так:

{% render 'icon' with 'down' %}

Что эквивалентно названию так:

{% render 'icon', icon: 'down' %}

Answer 2

Нет, фильтра нет, но вы можете "взломать" его, чтобы показать, что он html.

Если вы сделаете запрос на выборку к URL-адресу SVG, и он вернет его содержимое, и вы можете добавить содержимое на вашей странице.

Хотя это не отличное решение, это что-то.

Пример:

fetch('the_svg_url')
  .then(r=>r.text())
  .then(r => document.querySelector('.svg-holder').innerHTML = r);