Best way to build a SVG icon set in Shopify?

Technical Q&A
1

Hello!

I was creating some custom sections and I was using multiple icons uploading the .svg files in “assets”.

I found out that we can actually create a snippet in which we can have all our icons in one place and “recall” them by using {% include ‘XYZ’ with ‘123’ %}.

The snippet would look like something like this:

<!-- snippets/icon.liquid -->
<span class="icon" aria-hidden="true">
  {% case icon %}
  {% when 'XYZ' %}
    <!-- SVG CODE GOES HERE -->
  {% else %}
    <!-- {{ icon | capitalize }} icon not found -->
  {% endcase %}
</span>

would this be a good idea?

or it is better to have single .svg files in the asset folder??

or maybe there is another way?

Thanks in advance!

2

Yes. That is doable. You can put the SVG in the snippet and render them by calling them like this.

{% render ‘icon’, icon-name: icon-name %}

3

Thanks!

Since I am very very very new to coding, I am facing a couple of issues with that:

  1. I tried to render two different icons with different colors in the same section but both of them rendered with the same color. The second one took the color of the first one. why? here is my snippet: ( the quote icon took the star-solid icon’s color)
{% case icon %} {% when 'quote' %} .a{fill:#3375af;} {% when 'star-solid' %} .a{fill:#ffd43b;} {% else %} {% endcase %}
  1. I can’t figure out how to render the icon in css and how to style them. I tried to render them with:

.sectionxyz {

content: {{% include ‘xyz’ with ‘123’ %}

but it didn’t work. :confused: I don’t even have any idea about how to style them with css in the custom section…

I tried:

.star-solid {

xyz

}

but obviously it didn’t work. I am definitely missing something

any idea?

4

I don’t like reading people’s code since I have to understand it but anyway. There are several ways you can add color. You have assign a class or add the style tag directly to the element.

For this one, just change your classes

{% case icon %} {% when 'quote' %} .**a{fill:#3375af;}** {% when 'star-solid' %} .**b{fill:#ffd43b;}** {% else %} {% endcase %}