[Support request] Unable to change search icon in navigation

[Shami]

I have this code from gp forum:

add_filter( ‘generate_svg_icon_element’, function( $output, $icon ) {
if ( ‘search’ === $icon ) {
$output = ‘your SVG here’;
}

return $output;
}, 10, 2 );

I’ve uploaded the svg icon.

And I’m putting the url of the svg icon in the place of ‘your SVG here’

But it’s still not working.

Wonder what am I doing wrong here?

The url of the SVG icon shows up in the place of search icon when I do that.

Please let me know.

[David]

Hi there,

where it says your SVG here – you need to paste the SVGS HTML.

Go to this site:

https://jakearchibald.github.io/svgomg/

Open the SVG on there.
Switch to the Markup tab and copy the code you see there.

[Shami]

I added the code below, but it’s giving so many errors.

add_filter( ‘generate_svg_icon_element’, function( $output, $icon ) {
if ( ‘search’ === $icon ) {
$output = ‘<svg xmlns=”http://www.w3.org/2000/svg&#8221; width=”64″ height=”64″ viewBox=”0 0 128 128″>
<path fill=”#fff” d=”M108.9 108.9c-2.3 2.3-6.1 2.3-8.5 0L87.7 96.2c-2.3-2.3-2.3-6.1 0-8.5 2.3-2.3 6.1-2.3 8.5 0l12.7 12.7c2.3 2.4 2.3 6.2 0 8.5zM27.535 27.589a35 35 0 1 0 49.498 49.497 35 35 0 1 0-49.498-49.497Z”/>
<path fill=”#fff” d=”M27.535 27.589a35 35 0 1 0 49.498 49.497 35 35 0 1 0-49.498-49.497Z”/>
<path fill=”#71c2ff” d=”M52.3 84.3c-1.7 0-3-1.3-3-3s1.3-3 3-3c6.9 0 13.5-2.7 18.4-7.6 6.4-6.4 9-15.5 6.9-24.4-.4-1.6.6-3.2 2.2-3.6 1.6-.4 3.2.6 3.6 2.2C86 55.8 82.9 67.1 75 75c-6.1 6-14.1 9.3-22.7 9.3zM73 35c-.8 0-1.5-.3-2.1-.9l-.2-.1c-1.2-1.2-1.2-3.1 0-4.2 1.2-1.2 3.1-1.2 4.2 0l.2.2c1.2 1.2 1.2 3.1 0 4.2-.6.5-1.3.8-2.1.8z”/>
<path fill=”#444b54″ d=”M52.3 90.3c-9.7 0-19.5-3.7-26.9-11.1-14.8-14.8-14.8-38.9 0-53.7 14.8-14.8 38.9-14.8 53.7 0C94 40.3 94 64.4 79.2 79.2c-7.4 7.4-17.1 11.1-26.9 11.1zm0-69.9c-8.2 0-16.4 3.1-22.6 9.4-12.5 12.5-12.5 32.8 0 45.3C42.2 87.4 62.5 87.4 75 75c12.5-12.5 12.5-32.8 0-45.3-6.3-6.2-14.5-9.3-22.7-9.3zM111 98.3 98.3 85.6c-1.7-1.7-4-2.6-6.4-2.6-1.4 0-2.7.3-3.9.9l-2.5-2.5c-1.2-1.2-3.1-1.2-4.2 0-1.2 1.2-1.2 3.1 0 4.2l2.5 2.5c-.6 1.2-.9 2.5-.9 3.9 0 2.4.9 4.7 2.6 6.4L98.3 111c1.8 1.8 4.1 2.6 6.4 2.6s4.6-.9 6.4-2.6c3.4-3.5 3.4-9.2-.1-12.7zm-4.2 8.5c-1.2 1.2-3.1 1.2-4.2 0L89.8 94.1c-.6-.6-.9-1.3-.9-2.1s.3-1.6.9-2.1c.6-.6 1.3-.9 2.1-.9s1.6.3 2.1.9l12.7 12.7c1.3 1.1 1.3 3 .1 4.2z”/>
</svg>’;
}

return $output;
}, 10, 2 );

Errors:

Your PHP code changes were rolled back due to an error on line 33 of file wp-content/themes/generatepress_child/functions.php. Please fix and try saving again.

Uncaught Error: Undefined constant “‘generate_svg_icon_element’” in wp-content/themes/generatepress_child/functions.php:33
Stack trace:
#0 wp-settings.php(585): include()
#1 wp-config.php(76): require_once(‘/home/601010.cl…’)
#2 wp-load.php(50): require_once(‘/home/601010.cl…’)
#3 wp-admin/admin.php(34): require_once(‘/home/601010.cl…’)
#4 wp-admin/theme-editor.php(10): require_once(‘/home/601010.cl…’)
#5 {main}
thrown

[David]

Retry generating your SVG code, and then use the below code to paste it into.

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'search' === $icon ) {
        $output = '<svg>Your-custom-search-icon</svg>';
    }
    return $output;
}, 10, 2 );

[Shami]

add_filter( ‘generate_svg_icon_element’, function( $output, $icon ) {
if ( ‘search’ === $icon ) {
$output = ‘<svg xmlns=”http://www.w3.org/2000/svg&#8221; width=”25″ height=”25″ fill=”currentColor” class=”bi bi-search” viewBox=”0 0 16 16″>
<path d=”M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z”/>
</svg>’;
}
return $output;

if ( ‘menu-bars’ === $icon ) {
$output = ‘<svg xmlns=”http://www.w3.org/2000/svg&#8221; width=”16″ height=”16″ fill=”currentColor” class=”bi bi-menu-up” viewBox=”0 0 16 16″>
<path d=”M7.646 15.854a.5.5 0 0 0 .708 0L10.207 14H14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3.793l1.853 1.854zM1 9V6h14v3H1zm14 1v2a1 1 0 0 1-1 1h-3.793a1 1 0 0 0-.707.293l-1.5 1.5-1.5-1.5A1 1 0 0 0 5.793 13H2a1 1 0 0 1-1-1v-2h14zm0-5H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v2zM2 11.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 0-1h-8a.5.5 0 0 0-.5.5zm0-4a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11a.5.5 0 0 0-.5.5zm0-4a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1h-6a.5.5 0 0 0-.5.5z”/>
</svg>’;
}
return $output;

}, 10, 2 );

I’m trying to change both “search” and “menu-bars” icon.

The search icon is changing, but mobile menu icon is not changing.

I’ve put the link of website.

[David]

Try: 'pro-menu-bars' === $icon

[Shami]

Tried it. No change.

[Ying]

Can you try this for the menu bars?
https://generatepress.com/forums/topic/off-canvas-panel-not-showing-up/page/2/#post-2333535

Just replace the <svg> code with your <svg> code.

[Shami]

That worked. Thanks.

Now I have to use a different icon “while the menu is open” and “when the menu is closed.”

Right now the icon remains the same whether the menu is open or closed.

How do I do that?

[Fernando]

Hi Shami,

Try this snippet:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><g class="nc-icon-wrapper" fill="#000000"><path d="M381.9 388.2c-6.4 27.4-27.2 42.8-55.1 48-24.5 4.5-44.9 5.6-64.5-10.2-23.9-20.1-24.2-53.4-2.7-74.4 17-16.2 40.9-19.5 76.8-25.8 6-1.1 11.2-2.5 15.6-7.4 6.4-7.2 4.4-4.1 4.4-163.2 0-11.2-5.5-14.3-17-12.3-8.2 1.4-185.7 34.6-185.7 34.6-10.2 2.2-13.4 5.2-13.4 16.7 0 234.7 1.1 223.9-2.5 239.5-4.2 18.2-15.4 31.9-30.2 39.5-16.8 9.3-47.2 13.4-63.4 10.4-43.2-8.1-58.4-58-29.1-86.6 17-16.2 40.9-19.5 76.8-25.8 6-1.1 11.2-2.5 15.6-7.4 10.1-11.5 1.8-256.6 5.2-270.2.8-5.2 3-9.6 7.1-12.9 4.2-3.5 11.8-5.5 13.4-5.5 204-38.2 228.9-43.1 232.4-43.1 11.5-.8 18.1 6 18.1 17.6.2 344.5 1.1 326-1.8 338.5z"></path></g></svg>
		<svg xml:space="preserve" version="1.1" viewBox="0 0 129.921 129.921" height="129.921px" width="129.921px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><g id="Layer_2"></g><g id="Layer_1"><g><path d="M63.775,100.941c-31.357,0-56.867-25.51-56.867-56.867c0-1.642,1.33-2.972,2.973-2.972H117.67 c1.642,0,2.972,1.33,2.972,2.972C120.642,75.431,95.131,100.941,63.775,100.941z M12.938,47.047 c1.544,26.701,23.756,47.949,50.837,47.949c27.08,0,49.293-21.249,50.836-47.949H12.938z"></path></g><g><path d="M63.775,91.582c-26.28,0-47.66-21.38-47.66-47.66c0-1.642,1.331-2.972,2.973-2.972h89.374 c1.643,0,2.973,1.331,2.973,2.972C111.435,70.202,90.055,91.582,63.775,91.582z M22.165,46.895 c1.53,21.619,19.608,38.742,41.61,38.742s40.08-17.123,41.61-38.742H22.165z"></path></g><g><path d="M63.775,62.385c0,0,7.744,10.229,0,10.229S63.775,62.385,63.775,62.385z"></path></g><g><path d="M78.323,56.358c0,0,12.709,1.757,7.233,7.233C80.081,69.067,78.323,56.358,78.323,56.358z"></path></g><g><path d="M49.226,56.358c0,0-1.756,12.709-7.232,7.233C36.519,58.115,49.226,56.358,49.226,56.358z"></path></g></g></svg> ';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            'icon-menu-bars',
            $svg
        );
    }

    return $output;
}, 15, 2 );

Replace the two SVGs in the code with your SVG codes.

[Shami]

Worked like a charm.

Thanks.

[Fernando]

You’re welcome Shami!

[Shami]

I’m trying to replace the arrow icons using the same code. But it’s not working.

Here is the code I’m using to replace the down arrow:

add_filter( ‘generate_svg_icon’, function( $output, $icon ) {
if ( ‘arrow-right’ === $icon ) {
$svg = ‘<svg xmlns=”http://www.w3.org/2000/svg&#8221; width=”16″ height=”16″ fill=”currentColor” class=”bi bi-caret-right” viewBox=”0 0 16 16″>
<path d=”M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z”/>
</svg>’;

return sprintf(
‘<span class=”gp-icon %1$s”>
%2$s
</span>’,
$icon,
$svg
);
}

return $output;
}, 15, 2 );

[Fernando]

Can you point us to the specific location of this arrow you’re trying to change?

Or, you can share a screenshot of it as well.

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Shami]

Sure.

Find the screenshot here

[Author]

Posts