Adding extra SVGs to TwentyNineteen child theme using class TwentyNineteen_SVG_Icons

Question

I’m trying to change the svg of the ellipses for the mobile menu. It’s called in this file: template-functions.php so I did a hook on my child theme functions.php to replace it, like so:

function replace_ellipses() {
    if ( function_exists('twentynineteen_add_ellipses_to_nav') ) {
        remove_filter( 'wp_nav_menu', 'twentynineteen_add_ellipses_to_nav', 10, 2 ); 
    }
    function twentynineteen_add_new_ellipses_to_nav( $nav_menu, $args ) {

        if ( 'menu-1' === $args->theme_location ) :

            $nav_menu .= '<div class="main-menu-more">';
            $nav_menu .= '<ul class="main-menu">';
            $nav_menu .= '<li class="menu-item menu-item-has-children">';
            $nav_menu .= '<button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false">';
            $nav_menu .= '<span class="screen-reader-text">' . esc_html__( 'More', 'twentynineteen' ) . '</span>';
            $nav_menu .= twentynineteen_get_icon_svg( 'new_arrow_drop_down_ellipsis' );
            $nav_menu .= '</button>';
            $nav_menu .= '<ul class="sub-menu hidden-links">';
            $nav_menu .= '<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">';
            $nav_menu .= '<button class="menu-item-link-return">';
            $nav_menu .= twentynineteen_get_icon_svg( 'chevron_left' );
            $nav_menu .= esc_html__( 'Back', 'twentynineteen' );
            $nav_menu .= '</button>';
            $nav_menu .= '</li>';
            $nav_menu .= '</ul>';
            $nav_menu .= '</li>';
            $nav_menu .= '</ul>';
            $nav_menu .= '</div>';

        endif;

        return $nav_menu;
    }
    add_filter( 'wp_nav_menu', 'twentynineteen_add_new_ellipses_to_nav', 10, 2 );
}
add_action( 'wp_enqueue_scripts', 'replace_ellipses', 0 );

I then changed the line: $nav_menu .= twentynineteen_get_icon_svg( 'arrow_drop_down_ellipsis' );

to reference the new one: $nav_menu .= twentynineteen_get_icon_svg( 'new_arrow_drop_down_ellipsis' );

The function works, however the svg is not being loaded. The icons are defined as svg code in the file class-twentynineteen-svg-icons.php inside classes folder. I thought in replicating the classes folder in my child theme with the new svg code, doesn't work.

There is also in Twentynineteen the file inc/icon-functions.php with the function:

function twentynineteen_get_icon_svg( $icon, $size = 24 ) {
    return TwentyNineteen_SVG_Icons::get_svg( 'ui', $icon, $size );
}

Do I need to hook to this function?

Answer 1

Ok, this is what I did: First, I replicated classes/class-twentynineteen-svg-icons.php to the child theme. Renamed to class-mytheme-svg-icons.php.

Added a extend with my New_SVG_Icons class:

class New_SVG_Icons extends TwentyNineteen_SVG_Icons {

    /**
     * Gets the SVG code for a given icon.
     */
    public static function get_svg( $group, $icon, $size ) {
        if ( 'ui' == $group ) {
            $arr = self::$ui_icons;
        } elseif ( 'social' == $group ) {
            $arr = self::$social_icons;
        } else {
            $arr = array();
        }
        if ( array_key_exists( $icon, $arr ) ) {
            $repl = sprintf( '<svg class="svg-icon" width="%d" height="%d" aria-hidden="true" role="img" focusable="false" ', $size, $size );
            $svg  = preg_replace( '/^<svg /', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code.
            $svg  = preg_replace( "/([\n\t]+)/", ' ', $svg ); // Remove newlines & tabs.
            $svg  = preg_replace( '/>\s*</', '><', $svg ); // Remove white space between SVG tags.
            return $svg;
        }
        return null;
    }

    /**
     * User Interface icons – svg sources.
     *
     * @var array
     */
    static $ui_icons = array(
        'new_drop_down_ellipsis' => /* custom – ao_drop_down_ellipsis */ '
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path fill="none" d="M0 0h24v24H0V0z"/>
    <path d="M2 2v20h20V2H2zm4 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
</svg>',

    );
}

Back to the functions.php of the child theme I added the path for the replicated file:

function include_extra_svg() {
    require_once get_theme_file_path( 'classes/class-mytheme-svg-icons.php' );
}
add_action( 'wp_enqueue_scripts', 'include_extra_svg' );

Then I reference this function and class on the one I had before:

function replace_ellipses() {
    if ( function_exists('twentynineteen_add_ellipses_to_nav') ) {
        remove_filter( 'wp_nav_menu', 'twentynineteen_add_ellipses_to_nav', 10, 2 );
    }
    function twentynineteen_add_new_ellipses_to_nav( $nav_menu, $args ) {

        function mytheme_get_icon_svg( $icon, $size = 24 ) {
            return New_SVG_Icons::get_svg( 'ui', $icon, $size );
        }

        if ( 'menu-1' === $args->theme_location ) :

            $nav_menu .= '<div class="main-menu-more">';
            $nav_menu .= '<ul class="main-menu">';
            $nav_menu .= '<li class="menu-item menu-item-has-children">';
            $nav_menu .= '<button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false">';
            $nav_menu .= '<span class="screen-reader-text">' . esc_html__( 'More', 'twentynineteen' ) . '</span>';
            $nav_menu .= mytheme_get_icon_svg( 'ao_drop_down_ellipsis' );
            $nav_menu .= '</button>';
            $nav_menu .= '<ul class="sub-menu hidden-links">';
            $nav_menu .= '<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">';
            $nav_menu .= '<button class="menu-item-link-return">';
            $nav_menu .= twentynineteen_get_icon_svg( 'chevron_left' );
            $nav_menu .= esc_html__( 'Back', 'twentynineteen' );
            $nav_menu .= '</button>';
            $nav_menu .= '</li>';
            $nav_menu .= '</ul>';
            $nav_menu .= '</li>';
            $nav_menu .= '</ul>';
            $nav_menu .= '</div>';

        endif;

        return $nav_menu;
    }
    add_filter( 'wp_nav_menu', 'twentynineteen_add_new_ellipses_to_nav', 10, 2 );
}
add_action( 'wp_enqueue_scripts', 'replace_ellipses', 0 );

et voilà! I'm not sure if it's the best approach, however it's working.