"Bypassing" the SVG icon problem in the Social widget

[DikkRR]

Greetings!

I may have found a way to bypass the SVG icon error in the Social widget...

1. Create a folder inside the theme's layout/partials folder named social_html (themes/hugo-dpsg/layouts/partials/social_html)
2. Inside the social_html folder Create an HTML file for your social media (eg. tiktok.html)
3. go back one folder and go into the widgets folder and edit social.html (themes/hugo-dpsg/layouts/partials/widgets/social.html)
4. copy out a part where it starts with {{- with .Site.Params.widgets.social... and ends with {{- end }}, paste it under the copied text, and edit everything that mentions the social media in question (name, website, etc). it should look something like this:
   {{- with .Site.Params.widgets.social.tiktok }} <div class="widget-social__item widget__item"> <a class="widget-social__link widget__link btn" title="TikTok" rel="noopener noreferrer" href="https://tiktok.com/{{ . }}" target="_blank"> {{ partial "social_html/tiktok.html" (dict "class" "widget-social__link-icon") }} <span>TikTok</span> </a> </div> {{- end }}
5. now go to your tiktok.html file and edit insert an svg partial html (i got my code snippet from here: https://nucleoapp.com/social-media-icons. Just copy it to the clipboard and then paste it inside the HTML file):
6. modify width and height to "24" and viewBox to "0 0 30 30" and add fill="white" to match the button text, also add some   for good measure:
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" viewBox="0 0 30 30"><path d="M24.562,7.613c-1.508-.983-2.597-2.557-2.936-4.391-.073-.396-.114-.804-.114-1.221h-4.814l-.008,19.292c-.081,2.16-1.859,3.894-4.039,3.894-.677,0-1.315-.169-1.877-.465-1.288-.678-2.169-2.028-2.169-3.582,0-2.231,1.815-4.047,4.046-4.047,.417,0,.816,.069,1.194,.187v-4.914c-.391-.053-.788-.087-1.194-.087-4.886,0-8.86,3.975-8.86,8.86,0,2.998,1.498,5.65,3.783,7.254,1.439,1.01,3.19,1.606,5.078,1.606,4.886,0,8.86-3.975,8.86-8.86V11.357c1.888,1.355,4.201,2.154,6.697,2.154v-4.814c-1.345,0-2.597-.4-3.647-1.085Z"></path></svg>&nbsp;&nbsp;&nbsp;&nbsp;
7. Now you can edit you hugo.toml file and insert the appropriate parameter:
   [Params.widgets.social] tiktok = "@your-username-here"

Hope this helps! :)