[Resolved] How to add custom svg

[Randy]

I have custom svg I’d like to add to my “off-canvas-toggle-label”.

That label is controlled as showing either sign in or sign out by add_filter( ‘option_generate_menu_plus_settings’,

In case its helpful, that toggle label is part of span with class “menu-bar-item slideout-toggle hide-on-mobile has-svg-icon”

How can I insert custom svg in front of the $settings[‘off_canvas_desktop_toggle_label’] = in my add_filter, or even just hard-code it in front of that menu label if that’s easier.

Thanks!

[Leo]

Hi Randy,

The generate_off_canvas_toggle_output should be what you are looking for.

I just noticed that it’s not added to our documentation yet but see some examples of the usage here:
https://generatepress.com/forums/search/generate_off_canvas_toggle_output/

Let me know 🙂

[Randy]

OK, I see that example, thank you! Just trying to determine how to approach it.

I already have the following that is toggling the label:

add_filter( 'option_generate_menu_plus_settings', function( $settings ) {
	if ( is_user_logged_in() ) {
	   $settings['off_canvas_desktop_toggle_label'] = 'Sign Out';
	} else {
		$settings['off_canvas_desktop_toggle_label'] = 'Sign In or Join';	
	}
    return $settings;
} );

So then I guess I would use
add_filter( 'generate_off_canvas_toggle_output', function() {

and in that define the $svg = ‘svg definition here’;

But how would I then return it with the svg followed by my toggle label already set before in option_generate_menu_plus_settings?

Conceptually I get it, but just not quite sure on the coding to use!

[Leo]

Are you just trying to add something in front of the toggle?

If so something like this should do:
https://generatepress.com/forums/topic/changing-off-canvas-slide-out-menu-icon/#post-1270939

Can you link me to the page in question if that doesn’t work?

Thanks!

[Randy]

Not quite, I tried that and it completely replaces my Sign In / Sign Out text that I showed in this code above: add_filter( 'option_generate_menu_plus_settings'

I’m simply trying to put a small svg profile icon in front of the words Sign In and Sign Out.

Link below so you can see the Sign In / Sign Out button I’m referring to 🙂

[Ying]

Hi Randy,

Actually it can be done with Pseudo element. We could create an empty 20px by 20px box before the label, then insert your SVG as background image

.off-canvas-toggle-label:before {
    content: "";
    height: 20px;
    width: 20px;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E); 
    display: inline-block;
    margin-right: 10px;
}

Replace the content in url() with your SVG url. You might need to do some google research yourself 🙂

[Randy]

Perfect! That did the trick 🙂 Thank you Ying!

[Ying]

No problem Randy 🙂

[Author]

Posts