How to use svg from another snippet in the liquid template

Store Design
1

So I’ve gathered some svgs in one liquid snippet file called icons.liquid

{%- capture icon1 -%}<svg>...</svg>{%- endcapture -%}
{%- capture icon2 -%}<svg>...</svg>{%- endcapture -%}
{%- capture icon3 -%}<svg>...</svg>{%- endcapture -%}

and now I want to reuse them in another template. How can I do that? If those icons were in the same template I would just reference them with curly brackets e. g.

{{ icon1 }}

but I don’t know how to do that when those are in separate snippet. Is there another way if I can’t achieve that with capture?

Thanks in advance for any help!

2

Hi @Stevenson_1

You can pass them to the snippet you want to include.

{%- include 'snippet', Icon: icon1 -%}
3

Unfortunately I’m getting the error

include usage is not allowed in this context

4

Put each svg in a separate file under snippets folder and use “render” to show it in anywhere you want

{%- render 'icon-discount' -%}
5

huh then I think you have to include ‘icons.liquid’ again for that template you want to use.

You should better separate all icons.

Kani_0-1666169771320.png
Kani_0-1666169771320.png1087×659 35 KB

6

@Wish-It as I mentioned, I want them to be in one file

@Kani suggested by your answer, I found a solution:

I ended up bundling svgs in one svg-icons file using case when

{% case svg-icons %}
  {% when 'icon1' %}
    
  {% when 'icon2' %}
    
{% endcase %}

And then conditionally rendered them in specific place

{% render 'svg-icons' with 'icon1' %}
1 Like