Merge all icons into one file

[willholsten]

Would there be any performance issues if I merged all icons into one file and used a switch statement to render the correct icon?

[abhishekjani08]

can you explain how can we achieve this ?

[PaulNewton]

@willholsten use the theme inspector to evaluate such a change https://shopify.dev/docs/themes/tools/theme-inspector

@abhishekjani08 roughly, you would have to take the contents of each icon file in the snippets folder and put them into a single snippet (icons.liquid) using a liquid case/switch statement.

{% case icon %}
 {% when 'foo' %}
 {% comment %} foo SVG content {% endcomment %}
{% when 'bar' %}
 {% comment %} bar SVG content {% endcomment %}
{%- endcase -%}

Then render the snippet with the icon name

{% render 'icon' as 'foo' %} 

[joshistoast]

I actually did this in my company's dawn theme a while back, might make a pull request for the base theme.

My approach was the following:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="32"
  height="32"
  viewBox="0 0 24 24"
  class="icon icon-{{ name }} {{ class }}"
  aria-hidden="true"
  focusable="false"
>
  {% if name == '3d' %}
    <path fill="currentColor" d="m12 1l9.5 5.5v11L12 23l-9.5-5.5v-11L12 1ZM4.5 7.658v8.689l7.5 4.342V12L4.5 7.658Z"/>
  {% elsif name == 'account' %}
    <path fill="currentColor" d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0H4Zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6s6 2.685 6 6s-2.685 6-6 6Zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4Z"/>
  {% elsif name == 'arrow' %}
    <path fill="currentColor" d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2h12.172Z"/>
  {% elsif name == 'bookmark-fill' %}
    <path fill="currentColor" d="M5 2h14a1 1 0 0 1 1 1v19.143a.5.5 0 0 1-.766.424L12 18.03l-7.234 4.536A.5.5 0 0 1 4 22.143V3a1 1 0 0 1 1-1"/>

  ... more icons here

  {% endif %}
</svg>