Injecting SVGs into "Text columns with images" block

Store Design
1

Hey, I’m looking for a way to inject SVG images into the “Text columns with images” block, the code for which is located in the home-text-columns-with-images.liquid file.

Currently, the block iterates through an if statement to dynamically grab images that have been uploaded via the admin panel. I would like to change the PNG icons to Vector images instead, but SVGs are not a supported format.

I am aware that we can normally ‘hard-code’ the SVGs into blocks, but I’m unsure how to do it in this case. Ideally, I would like to keep everything manageable from the admin panel, but if that is not possible then it would be great if someone could show me how to ‘hard-code’ my SVGs into this particular block. Since it’s an if statement grabbing PNGs I’m not sure how to assign the correct SVGs to the correct columns if I were to ‘hard-code’ them.

A very similar question has been previously asked here https://community.shopify.com/topic/1146832 and even though it seems that the Original Poster has managed to find a solution, unfortunately, no further information has been provided in that thread.

My website: https://everest-sheds.myshopify.com/
Frontend Password: peopleplanetprofit

This is the home-text-columns-with-images.liquid file come:


{% schema %}
{
  "name": "Text columns with images",
  "max_blocks": 6,
  "settings": [
    {
      "type": "select",
      "id": "style",
      "label": "Style",
      "options": [
        {
          "value": "default-style",
          "label": "Default"
        },
        {
          "value": "accent-style",
          "label": "Accent"
        },
        {
          "value": "contrast-style",
          "label": "Contrast"
        }
      ],
      "default": "default-style"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Text columns with images"
    },
    {
      "type": "range",
      "id": "max_image_width",
      "min": 25,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Image width",
      "default": 100
    }
  ],
  "blocks": [
    {
      "type": "text_column",
      "name": "Column",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Feature title"
        },
        {
          "type": "richtext",
          "id": "caption",
          "label": "Text",
          "default": "

Display up to six features with an option to toggle images on or off, and add unique calls to action.

"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Link URL"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Text",
      "name": "Text columns with images",
      "blocks": [
        {
          "type": "text_column"
        },
        {
          "type": "text_column"
        },
        {
          "type": "text_column"
        }
      ]
    }
  ],
  "templates": [
    "index",
    "product",
    "page"
  ]
}

{% endschema %}