All geek questions in one place

Using SVG Icons in Shopify

I have over 30 svg icons that I want to use in my Shopify theme. For readability, I don’t want to add it directly to the .liquid template, but to use include:

{% include 'some-icon' %}

and some-icon.liquid to have SVG code

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

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

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

Any other way to do this? thank you

+6
source share
4 answers

Looking for a simple and convenient way to add SVG badges to Shopify. Here is my best way to find. If you know better, let me know.

In Snipets, create the file "my-theme-icons", which 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, simply specify them as:

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

Hope this helps

+7
source

No. You cannot create directories for assets, fragments, or other components of a theme. In your local development environment where the problem arises, perhaps you can color the code of your files by extension to keep the types more obvious or enable some sorting by extension to do the same.

0
source 
 {% include 'icon' with 'shopify' %}

Call the desired icon and arrange them in a fragment using the case statement.

 <!-- snippets/icon.liquid --> <span class="icon" aria-hidden="true"> {% case icon %} {% when 'shopify' %} <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="shopify" aria-label="Shopify" role="img"> <title>Shopify</title> <desc>Shopify {{ 'icon.icon' | t }}</desc> <path d="M13.3 3.1C13.3 3 13.2 3 13.1 3c-0.1 0-1.3-0.1-1.3-0.1S11 2 10.9 1.9c-0.1-0.1-0.3-0.1-0.3 0 0 0-0.2 0.1-0.5 0.1C9.8 1.2 9.5 0.5 8.3 0.5 8.1 0.1 7.8 0 7.5 0c-2.1 0-3 2.6-3.4 3.9C3.3 4.1 2.8 4.3 2.7 4.3 2.3 4.5 2.2 4.5 2.2 4.9c0 0.3-1.2 9.4-1.2 9.4l9.1 1.7 4.9-1.1C15 14.9 13.3 3.2 13.3 3.1zM8.3 2.6c-0.5 0.2-1 0.3-1.6 0.5 0.3-1.2 0.9-1.8 1.4-2C8.3 2 8.3 2.6 8.3 2.6zM7.4 0.6c0.1 0 0.2 0 0.3 0.1C7.1 1 6.3 1.7 6 3.3 5.6 3.4 5.2 3.6 4.8 3.7 5.1 2.5 6 0.6 7.4 0.6zM7.8 7.5c0 0-0.5-0.3-1.2-0.3 -1 0-1 0.6-1 0.8 0 0.8 2.2 1.1 2.2 3.1 0 1.5-1 2.5-2.3 2.5 -1.6 0-2.4-1-2.4-1l0.4-1.4c0 0 0.8 0.7 1.5 0.7 0.5 0 0.6-0.4 0.6-0.6 0-1.1-1.8-1.1-1.8-2.9 0-1.5 1.1-2.9 3.2-2.9 0.8 0 1.2 0.2 1.2 0.2L7.8 7.5zM8.8 2.4c0-0.1 0-0.1 0-0.2 0-0.5-0.1-0.9-0.2-1.2 0.5 0.1 0.8 0.6 1 1.2C9.4 2.3 9.1 2.4 8.8 2.4z" class="fill"/> </svg> {% when 'menu' %} <!-- SVG CODE GOES HERE --> {% when 'cart' %} <!-- SVG CODE GOES HERE --> {% else %} <!-- {{ icon | capitalize }} icon not found --> {% endcase %} </span>
0
source

I would suggest using a task runner (for example, Gulp or Grunt) to create an SVG icon sprite (there are several modules that do this). Your src files may be outside the theme folder, eventually merged and added to the snippet that you include immediately after opening the <body> . Another piece of icon.liquid then references and “uses” them:

 <svg class="icon icon-{{ icon }}"> <use xlink:href="#icon-{{ icon }}"></use> </svg>

You would include this snippet as follows: {% include 'icon' with 'logo' %}

0
source

Source: https://habr.com/ru/post/982462/

More articles:


All Articles