Adding/Changing SVG icons

Hi @whonickedmyname .
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:
$nav_menu .= twentynineteen_get_icon_svg( 'new_arrow_drop_down_ellipsis' );

new_arrow_drop_down_ellipsis is the svg code that I am calling for the icon.
The icons are defined as svg code in the file class-twentynineteen-svg-icons.php inside classes folder.
What I did was recreate this folder and file in my child theme and place the svg code for the new icon with the new_arrow_drop_down_ellipsis id.

The function works, however the svg is not being loaded…

The question for me is how to reference the classes/class-twentynineteen-svg-icons.php in the child theme.

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="https://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.

• This reply was modified 5 years, 8 months ago by anoktear.