Off Canvas Custom SVG Icon

Hi Michael,

You could give this php snippet a try:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'pro-close' === $icon ) {
        $output = 'your custom svg';
    }

    return $output;
}, 10, 2 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Thanks Ying. I went ahead and installed the Code Snippets plugin to make it easy to test. I took your snippet and inserted my SVG code into it and saved it. But when I attempt to activate the code it deactivates and tells me "Parse error: syntax error, unexpected end of snippet". I looked it over but I don't see anything obvious.

Your snippet seems to have some typo here:
https://www.screencast.com/t/yjX0ro4q

Could you double check? Thanks :)

I guess I'm just missing it Ying. I took your snippet and added the svg info. See below.

add_filter( 'generate_svg_icon, function( $output, $icon ) {
   if ( 'pro-close' === $icon ) {
        $svg = '<svg width="100%" height="100%" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g transform="matrix(1.00619,0,0,1.00619,-2.40519,0.0671904)">
        <circle cx="17.287" cy="14.771" r="12.918" style="fill:white;fill-opacity:0;stroke:rgb(183,20,46);stroke-width:1.99px;"/>
    </g>
    <g transform="matrix(1,0,0,1,-40.7265,5.87845)">
        <text x="49.051px" y="14.011px" style="font-family:'Arial-Black', 'Arial Black', sans-serif;font-weight:900;font-size:20px;fill:rgb(183,20,46);">x</text>
    </g>
</svg>';
    }

    if ( $svg ) {
        $output = sprint(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

Edited php snippet here:
https://generatepress.com/forums/topic/off-canvas-custom-svg-icon/#post-1647379

I tested with your SVG, got some errors while it works with another svg.

It seems having a hard time to read the X letter inside the svg.

Gotcha. I reworked the SVG and paired it with the snippet one more time. Works great. Thanks for your help Ying.

Great! Glad to hear it works :)