Social Media Icons

Hello,
I’m new to hugo and got a simple question.
I want to get SVG images in my footer for social media icon.
I do it this way as of today :

  • SVG images in /static
  • in footer :

           <a class="inline-block px-2" href="#"><img class="" src="{{ (default "facebook-icon.svg" ) | relURL }}" alt="mysite" width="26"></a>
           <a class="inline-block px-2" href="#"><img class="" src="{{ (default "twitter-icon.svg" ) | relURL }}" alt="mysite" width="26"></a>
           <a class="inline-block" href="#"><img class="" src="{{ (default "instagram-icon.svg" ) | relURL }}" alt="mysite" width="26"></a>
        </div>

It works fine but I see in same themes other ways of doing as :

  • create a social.htlm page
  • create a svg.htlm page with inline svg

What is the best practice for Hugo in order to display SVG images in partials?

Thanks for your support.

Your quoted code block above looks fine.

There is no best practice set in stone.

Have a look at other related forum topics to get inspiration about how other people are using SVG in their Hugo projects.

Thanks )
I will keep it this way then and maybe make is more “fancy” in the future as an improvement when I will be more familiar with Hugo.

At a later point try the following (my preferred method now):

  • put the SVG file (if it’s one single file per icon) into the layouts/partials folder (maybe layouts/partials/icons/iconname.svg for the sake of this description)
  • at the place you want to display the icon do add the partial: {{ partial "icons/iconname" . }}
  • maybe surround with a <span class="iconname"><svg...></span>, that you can design (height, width and so on) with span.iconname { width: 100px;} (put the span tag OUTSIDE of the partial, so the partial file starts with SVG, better for later changes)
  • define icon color with span.iconname svg {currentColor: #rgb;}

This will basically “embedd” the icon inside of the page. If it’s not too large this will make more sense that having the browser load x icons for each of your social networks (good for page speed > good for seo).

I am not aware of any disadvantages of this.

This of course makes only sense if your icon is a simple shape in SVG and not a complicated logo with many colors and “intrincacies”… I have no kB number for the size of an icon, but if you are using a one-colored icon it makes sense to embed into the html. IMHO.

yes it’s more or less the “other” solution I wanted to set up. It’s more “work” than basic icon link but much more flexible. Thanks for the tips.