Using SVG icon instead of text for site logo

[Tykmis]

Hey,

i need help. How can i add a SVG logo instead of text for site logo? After reading issue #162, i can add my svg icon to svg.html. Now, i can use it in social icons (and it works fine, the color changes depending on theme color), but i don't now how to use it as a logo? I understand that in header.html, there is a reference to an image specified in config.yml (label: icon). How to change the reference to my svg in svg.html. Can someone give me an example?

Thanks for help :)

PS: And really thank you for this theme. I looked hundreds of themes and only this one caught my eye with its refinement and good multilanguage support

[abishek]

I added a svg icon to my index page and it seems to work fine. I place my icon file (logo.svg) in the static folder. In the config.toml file, I added
label.icon=logo.svg

[nk-henning]

In my config.toml this worked:

[params]
label.icon = "logo.png"

[BenjaminMary]

Hey,

To use your svg with the color switch, you have to use the label iconSVG.

You can test this with the GitHub svg in your hugo.yml file :

params:
    label:
        iconSVG: "<svg 
            xmlns='http://www.w3.org/2000/svg' viewBox='-10 -25 48 48' fill='none' stroke='currentColor' stroke-width='2'
            stroke-linecap='round' stroke-linejoin='round'>
            <path
                d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'>
            </path>
        </svg>        
        "
        text: "GitHub"

---

I think that this is the only way to trigger this part in the header.html of the theme :

...
                {{- else if hasPrefix site.Params.label.iconSVG "<svg" }}
                    {{ site.Params.label.iconSVG | safeHTML }}
...