Support » Theme: Twenty Nineteen » Adding/Changing SVG icons

  • Hi,

    I’ve used twenty nineteen as a parent theme, and I’d like to change the SVG paths without overwriting the parent files.

    Also, can someone tell me the difference between the “ui” svg paths and the “social” paths?

    Thanks
    Laura

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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="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.

    • This reply was modified 10 months, 3 weeks ago by anoktear.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding/Changing SVG icons’ is closed to new replies.