Using SVG icons in Shopify

Question

I have over 30 svg icons I want to use in my Shopify theme. For readability sake I do not want to add then directly in the .liquid template but to use include:

{% include 'some-icon' %}

and some-icon.liquid to have the SVG code

The problem is that all these 30 files will have to reside in my Snippets directory. With all the other files in Snippets it will be a mess.

Is it possible to create an additional directory in Shopify and import them from there:

{% include 'MyIcons/some-icon' %}

Any other way to do this? Thank you

Answer 1

Been looking for a simple and maintainable way of adding SVG icons to Shopify. Here is my best way found. If you know better please let me know.

In Snipets create file 'my-theme-icons' witch will contain:

{% if my-theme-icons == 'home' %}
<svg  xmlns="http://www.w3.org/2000/svg">
... my home icon
</svg>
{% elsif my-theme-icons == 'search' %}
<svg  xmlns="http://www.w3.org/2000/svg">
... my search icon
</svg>
{% endif %}

In your templates just include them as:

{% include 'my-theme-icons' with 'home' %}
{% include 'my-theme-icons' with 'search' %}

Hope it helps