twenty_twenty_one_get_icon_svg example

function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args ) {
    if ( 0 === $depth && in_array( 'menu-item-has-children', $item->classes, true ) ) {

        // Add toggle button.         $output .= '<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)">';
        $output .= '<span class="icon-plus">' . twenty_twenty_one_get_icon_svg( 'ui', 'plus', 18 ) . '</span>';
        $output .= '<span class="icon-minus">' . twenty_twenty_one_get_icon_svg( 'ui', 'minus', 18 ) . '</span>';
        /* translators: Hidden accessibility text. */
        $output .= '<span class="screen-reader-text">' . esc_html__( 'Open menu', 'twentytwentyone' ) . '</span>';
        $output .= '</button>';
    }
    return $output;
}
add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_sub_menu_toggle', 10, 4 );

/** * Detects the social network from a URL and returns the SVG code for its icon. * * @since Twenty Twenty-One 1.0 * * @param string $uri Social link. * @param int $size The icon size in pixels. * @return string */

            ?> </ol><!-- .comment-list --> <?php         the_comments_pagination(
            array(
                'before_page_number' => esc_html__( 'Page', 'twentytwentyone' ) . ' ',
                'mid_size'           => 0,
                'prev_text'          => sprintf(
                    '%s <span class="nav-prev-text">%s</span>',
                    is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ),
                    esc_html__( 'Older comments', 'twentytwentyone' )
                ),
                'next_text'          => sprintf(
                    '<span class="nav-next-text">%s</span> %s',
                    esc_html__( 'Newer comments', 'twentytwentyone' ),
                    is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' )
                ),
            )
        );
        ?>

/** * Changes the default navigation arrows to svg icons * * @since Twenty Twenty-One 1.0 * * @param string $calendar_output The generated HTML of the calendar. * @return string */
function twenty_twenty_one_change_calendar_nav_arrows( $calendar_output ) {
    $calendar_output = str_replace( '&laquo; ', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ), $calendar_output );
    $calendar_output = str_replace( ' &raquo;', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ), $calendar_output );
    return $calendar_output;
}
add_filter( 'get_calendar', 'twenty_twenty_one_change_calendar_nav_arrows' );

/** * Get custom CSS. * * Return CSS for non-latin language, if available, or null * * @since Twenty Twenty-One 1.0 * * @param string $type Whether to return CSS for the "front-end", "block-editor", or "classic-editor". * @return string */

'prev_text' => sprintf( __( '<span class="meta-nav">Published in</span><span class="post-title">%s</span>', 'twentytwentyone' ), '%title' ),
            )
        );
    }

    // If comments are open or there is at least one comment, load up the comment template.     if ( comments_open() || get_comments_number() ) {
        comments_template();
    }

    // Previous/next post navigation.     $twentytwentyone_next = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' );
    $twentytwentyone_prev = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' );

    $twentytwentyone_next_label     = esc_html__( 'Next post', 'twentytwentyone' );
    $twentytwentyone_previous_label = esc_html__( 'Previous post', 'twentytwentyone' );

    the_post_navigation(
        array(
            'next_text' => '<p class="meta-nav">' . $twentytwentyone_next_label . $twentytwentyone_next . '</p><p class="post-title">%title</p>',
            'prev_text' => '<p class="meta-nav">' . $twentytwentyone_prev . $twentytwentyone_previous_label . '</p><p class="post-title">%title</p>',
        )
    );

    function twenty_twenty_one_the_posts_navigation() {
        the_posts_pagination(
            array(
                'before_page_number' => esc_html__( 'Page', 'twentytwentyone' ) . ' ',
                'mid_size'           => 0,
                'prev_text'          => sprintf(
                    '%s <span class="nav-prev-text">%s</span>',
                    is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ),
                    wp_kses(
                        __( 'Newer <span class="nav-short">posts</span>', 'twentytwentyone' ),
                        array(
                            'span' => array(
                                'class' => array(),
                            ),
                        )
                    )
                ),
                'next_text'          => sprintf(
                    '<span class="nav-next-text">%s</span> %s',
                    

?> <?php if ( has_nav_menu( 'primary' ) ) : ?> <nav id="site-navigation" class="primary-navigation" aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>"> <div class="menu-button-container"> <button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false"> <span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?> <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?> </span> <span class="dropdown-icon close"><?php esc_html_e( 'Close', 'twentytwentyone' ); ?> <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput ?> </span> </button><!-- #primary-mobile-menu --> </div><!-- .menu-button-container --> <?php         wp_nav_menu(
            array(
                'theme_location'  => 'primary',
                'menu_class'      => 'menu-wrapper',