different SVG's showing up as the first SVG in browser - html

Question

Basically i'm building a jekyll site with a footer containing some SVGs for social icons but the problem is that the first svg(they are saved inside the icons/<socialNames>.html files) will replace all the other SVGs when rendered in the browser. So instead of having a twitter icon, snapchat icon, facebook.icon, etc, four twitter icons are being rendered. The problem is that the first svg is replacing the others, but why? is there an alternative way to import SVG files?
I've tried using firefox, chrome and safari all with the same result. Tried making a seperate svg file and using {% include icons/<fileName>.svg %} but didn't fix it.
Here is my footer.html file:
<nav>
{% include icons/twitterIcon.html %}
{% include icons/snapchatIcon.html %}
{% include icons/facebookIcon.html %}
{% include icons/instagramIcon.html %}
</nav>
imgur link to how chrome displays the footer: https://i.imgur.com/VBYNHqd.png
I expected four different svgs instead the first svg is being rendered four times. Why is this happening? is there a workaround?

Answer 1

First of all, I think you need to try a different approach.
Create a folder in the root of your project called "_data" and create a new file in there called content.yml or whatever you want to call it.
Add the following in the content.yml file: - Note, this can also be .json or .csv.
social:
- name: "Twitter"
link: "http://twitter.com"
icon: "/link/to/image.svg"
- name: "SnapChat"
link: "http://snapchat.com"
icon: "/link/to/image.svg"
- name: "Facebook"
link: "http://facebook.com"
icon: "/link/to/image.svg"
Add the following syntax where you want your Social links to be appear.
<nav>
{% for social in site.data.content.social %}
{{ social.icon }}
{% endfor %}
</nav>
In your _includes/icons folder, save the SVG files as actual SVGs and not as an .HTML file and place it in your images or assets folder.
This way your HTML markup is much cleaner.
Hope this helps.