[Resolved] Change color svg icon

[gabrielvb1100]

Hello, Ive added an svg image as an logo, but it looks all black in my header, is there a way to fill it with other color? for example, the same color as my menu links?
Ive tried :

.site-logo svg {
fill: #fff;
}

but it is not working
thx.

[Elvin]

Hi,

You can’t style SVGs that way if they’re added as an img src. That only works on inline SVGs.

If you need to change the color, I’m afraid you’ll have to edit it on a SVG image editor software like Adobe Illustrator or add it in as a inline SVG.

You can use generate_logo_output filter to add it in.
https://docs.generatepress.com/article/generate_logo_output/

[gabrielvb1100]

Hi, how do I use the code?

[gabrielvb1100]

I have added the code provided like this in my functions

add_filter( 'generate_logo_output', function() {
    return sprintf( // WPCS: XSS ok, sanitization ok.
        '<div class="site-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.499 12.03v11.971l-10.5-5.603v-11.835l10.5 5.467zm11.501 6.368l-10.501 5.602v-11.968l10.501-5.404v11.77zm-16.889-15.186l10.609 5.524-4.719 2.428-10.473-5.453 4.583-2.499zm16.362 2.563l-4.664 2.4-10.641-5.54 4.831-2.635 10.474 5.775z"/></svg>
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

and then the svg shows as logo, is there a way to modify its width and height?

[Elvin]

Try this:

add_filter( 'generate_logo_output', function() {
    return sprintf( // WPCS: XSS ok, sanitization ok.
        '<div class="site-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.499 12.03v11.971l-10.5-5.603v-11.835l10.5 5.467zm11.501 6.368l-10.501 5.602v-11.968l10.501-5.404v11.77zm-16.889-15.186l10.609 5.524-4.719 2.428-10.473-5.453 4.583-2.499zm16.362 2.563l-4.664 2.4-10.641-5.54 4.831-2.635 10.474 5.775z"></path></svg>
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

You then adjust the size with this CSS:

.site-logo.MY-CUSTOM-CLASS svg {
    width: 72px;
    height: auto;
}

[gabrielvb1100]

it works great. Is there a way to set it as mobile logo as well?

[Elvin]

Sure you can.

You can use the generate_mobile_header_logo_output. Just copy the code you’ve used on the other filter to have the exact same thing. 😀

[gabrielvb1100]

Super cool, it works.
Thank you.

[Elvin]

No problem. Glad it works for you. 😀

[Author]

Posts