Shopify Liquid Filter to insert SVG file straight in HTML?

Issue

Is there a filter to stick an SVG file right in the HTML of a Liquid file? I want to be able to manipulate the SVG styling with CSS, which I am unable to do if I only set the SRC of an IMG.

For example, is something like this possible with Shopify Liquid:

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

compiles to

<svg>blablalba</svg>

Solution

I would recommend instead that you put all of your svgs into one liquid snippet file like this:

<!-- 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"/>
...

Then you can call it like this:

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

Which is the equivalent of calling it like this:

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

Answered By - GeorgeButter