Archived topic
Custom Search SVG Icon And Close Search Icon
7 replies · Started by Mario on August 2, 2021
Hi there.
I have followed the instructions on your forum page: https://generatepress.com/forums/topic/change-search-svg-icon-to-another-svg-icon/ to replace the search svg icon with my own. After the svg icon change there is no closing 'X' icon call in the script.
If I switch off the script I can see the call for two SVG icons in the Chrome Inspector. The second icon is hidden with the css:
.close-search .icon-search svg:nth-child(1), .icon-menu-bars svg:nth-child(2), .icon-search svg:nth-child(2), .toggled .icon-menu-bars svg:nth-child(1) {
display: none;
}How can I insert the svg icon code for the 'X' icon?
Hi Mario,
Try this snippet instead.
Replace the <svg>Your-custom-search-icon</svg> with your own search SVG, the other SVG is the default GP close SVG.
add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
if ( 'search' === $icon ) {
$output = '<svg>Your-custom-search-icon</svg>
<svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"><path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path></svg>';
}
return $output;
}, 10, 2 );Let me know if it works :)
Hi Ying,
Thanks for your help. It is working :).
It will be useful to include this instruction in your documentation page: https://docs.generatepress.com/article/generate_svg_icon_element/.
We'll update the documentation asap :)
Hi there,
After today's update to Generatepress version: 3.1.0 I have a problem with the custom search icon in the menu bar. I have updated my development site first to discover the problem.
The live site is still on Generatepress version: 3.0.4 and the custom SVG search icon si OK.
Are there any instructions for updating the code?
Hi Mario,
Thanks for reporting this to us, so in the new version, you can remove the svg of close icon in the PHP code.
It will be like this:
add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
if ( 'search' === $icon ) {
$output = '<svg>Your-custom-search-icon</svg>';
}
return $output;
}, 10, 2 );Hi Ying.
Thanks for your fast support. It is working :)
No problem :)
