Just a little snippet of php is all ya’ need!
/* Hamburger Menu */
add_filter( 'generate_svg_icon', function( $output, $icon ) {
if ( 'menu-bars' === $icon ) {
$svg = '<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.6C0 7.26863 0.268629 7 0.6 7H14.6C14.9314 7 15.2 7.26863 15.2 7.6C15.2 7.93137 14.9314 8.2 14.6 8.2H0.6C0.268629 8.2 0 7.93137 0 7.6Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.6C0 0.268629 0.268629 0 0.6 0H14.6C14.9314 0 15.2 0.268629 15.2 0.6C15.2 0.931371 14.9314 1.2 14.6 1.2H0.6C0.268629 1.2 0 0.931371 0 0.6Z" fill="currentColor"/>
</svg>';
return sprintf(
'<span class="gp-icon %1$s">
%2$s
</span>',
$icon,
$svg
);
}
return $output;
}, 15, 2 );
If you want to put your own icon in there, you just need to replace everything in the <svg>...</svg>
tags.
I used the fill of “currentColor
” so you can continue to color the icon using the theme’s customizer settings — so if you swap your SVG out, make sure to replace any colors with “currentColor
“