Social Media Icons

support
1

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.

2

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.

3

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.

4

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.

5

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.