An Icon Component in Liquid

When working with Shopify themes, it’s common to need a variety of icons throughout your site. Instead of hardcoding each icon individually, you can create a reusable Liquid component to streamline the process. Here’s how you can create a simple icon component in Liquid.

{%- comment -%} Simple icon snippet: use name and optional class {%- endcomment -%}
{%- assign file_name = name | append: '.svg' -%}
{%- assign svg_content = file_name | inline_asset_content -%}

{%- if svg_content != blank -%}
  <i class="henk-icon {{ class }}">
    {{ svg_content }}
  </i>
{%- else -%}
  <!-- Icon "{{ name }}" not found -->
{%- endif -%}