Can I use svg – code or file – or images in yml data files in jekyll?

user_8430772 0
Viewed 37

I have a loop that pulls data from a data file. I want one of the things it pulls to be an icon, either svg code or file, or an image file, whatever works.

Data file example.yml:

- title: Lorem title
  description: Lorem description 
  icon: [icon code or file?]

Loop example:

{% for item in site.data.example %}
<span>{{ item.icon }}</span>
<h3>{{ item.title }}</h3>
<p>{{ item.description</p>
{% endfor %}

Can this work somehow?

jekyll
1 Answers

You could introduce a type:

- title: Lorem title
  description: Lorem description 
  icon:
    type: icon
    name: nature_people
- title: Lorem title
  description: Lorem description 
  icon:
    type: image
    image_path: /uploads/my-icon.png
    alt: An example icon
- title: Lorem title
  description: Lorem description 
  icon:
    type: svg
    value: >-
      <svg>
        <!-- The SVG elements -->
      </svg>

Then use conditionals in your template:

{% for item in site.data.example %}
  {% if item.icon.type == 'icon' %}
    <i class="material-icons">{{ item.icon.name }}</span>
  {% elsif item.icon.type == 'image' %}
    <img src="{{ item.icon.image_path }}" alt="{{ item.icon.alt }}">
  {% else %}
    {{ item.icon.value }}
  {% end %}

  <h3>{{ item.title }}</h3>
  <p>{{ item.description</p>
{% endfor %}

This does assume that icon is always set.

user_54775610
Related