-
Why is a duplicate icon for the search included in the code? That’s unnecessary code, isn’t it?
<span class="menu-bar-item"> <a href="#" role="button" aria-label="Suche öffnen" aria-haspopup="dialog" aria-controls="gp-search" data-gpmodal-trigger="gp-search"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" 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></span></a> </span> -
Hi there,
I’m not sure what you mean, the 2 icons are 1 magnify glass for search and 1 cross for closing the search.
Let me know if I miss anything.
-
Hi Ying,
That was my mistake. I thought it was the same thing.
I’m trying to replace it with the code, but it’s not working. Do you have another quick tip for me?add_filter( 'generate_svg_icon_element', function( $output, $icon ) { if ( 'close' === $icon ) { $output = '<svg class="icon"><use href="#close"></use></svg>'; } return $output; }, 10, 2 ); -
Hi there,
Just to confirm, are you looking to replace only the default Navigation Search modal icon?
-
Hi Alvind,
my goal is to replace all SVG icons with my icon set. This offers better performance, as the set is kept in the cache.old:
<svg viewBox=”0 0 512 512″ aria-hidden=”true” xmlns=”http://www.w3.org/2000/svg” 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>new:
<svg class=”icon”><use href=”#close”></use></svg>Kind regards
Jens -
Try this:
add_filter( 'generate_svg_icon_element', function( $output, $icon ) { if ( 'search' === $icon ) { $output = '<svg class="icon"><use href="#close"></use></svg>'; } return $output; }, 10, 2 ); -
Hi Ying,
that only replaces the first icon, but not the second one.
<span class="gp-icon icon-search"><svg class="icon"> <use href="#search"></use></svg> <svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" 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> </span>Kind regards
Jens -
Can I see it on your site?
-
see private message
-
Try this PHP snippet instead:
add_filter('generate_svg_icon', 'yh_change_search_svg_icons', 15, 2); function yh_change_search_svg_icons($output, $icon) { if ('search' === $icon) { $svg = '<svg class="icon"><use href="#search"></use></svg>'; } if (!empty($svg)) { return sprintf( '<span class="gp-icon %1$s">%2$s</span>', esc_attr($icon), $svg ); } return $output; } -
Hi Ying,
The perfect solution once again. Many thanks, and have a great start to the new week.
Kind reagrds
Jens -
You are welcome and thanks 🙂
- You must be logged in to reply to this topic.