Replace custom SVG icons in Twenty Twenty-One

I was trying to investigate how to replace some icons of the parent theme with the child theme but I was not able to do it. I am trying to replace the SVG icons that are in the twentytwentyone\classes\class-twenty-twenty-one-svg-icons.php file, specifically the Menu and Close icons. In my child theme I created the classes folder and copied the same svg icons file, but when I try to call it in my child theme functions.php, it doesn't work, I'm probably using the wrong functions.

class-twenty-twenty-one-svg-icons.php file parent theme

class Twenty_Twenty_One_SVG_Icons {

/**
 * User Interface icons – svg sources.
 *
 * @since Twenty Twenty-One 1.0
 *
 * @var array
 */
protected static $icons = array(
    'arrow_right' = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=m4 13v-2h12l-4-4 1-2 7 7-7 7-1-2 4-4z fill=currentColor//svg',
    'arrow_left'  = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M20 13v-2H8l4-4-1-2-7 7 7 7 1-2-4-4z fill=currentColor//svg',
    /*Change menu icon. I would have to change it in ChildTheme*/
    // 'menu'        = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M4.5 6H19.5V7.5H4.5V6ZM4.5 12H19.5V13.5H4.5V12ZM19.5 18H4.5V19.5H19.5V18Z fill=currentColor//svg',
    // 'close'       = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M12 10.9394L5.53033 4.46973L4.46967 5.53039L10.9393 12.0001L4.46967 18.4697L5.53033 19.5304L12 13.0607L18.4697 19.5304L19.5303 18.4697L13.0607 12.0001L19.5303 5.53039L18.4697 4.46973L12 10.9394Z fill=currentColor//svg',
    'close'       = 'svg viewBox=0 0 36 26 fill=none xmlns=http://www.w3.org/2000/svgpolygon fill-rule=evenodd clip-rule=evenodd fill=currentColor points=29.4,1.7 28.8,1.1 17.5,12.4 6.2,1.1 5.6,1.7 16.9,13 5.6,24.3 6.2,24.9 17.5,13.6 28.8,24.9 29.4,24.3 18.1,13 //svg',
    'menu'        = 'svg viewBox=0 0 36 26 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M1,1.3h34v0.8H1V1.3z M1,12.4h34v0.8H1V12.4z M34.9,23.8H1v0.9h34v-0.9H34.9z fill=currentColor//svg',
    'plus'        = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z fill=currentColor//svg',
    'minus'       = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M6 11h12v2H6z fill=currentColor//svg',
);

As you can see, for the moment I'm replacing it in the parent theme, but that's not the idea.

class-twenty-twenty-one-child-svg-icons.php my custom svg icons

class Twenty_Twenty_One_Child_SVG_Icons {

/**
 * User Interface icons – svg sources.
 *
 * @since Twenty Twenty-One 1.0
 *
 * @var array
 */
protected static $icons = array(
    'arrow_right' = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=m4 13v-2h12l-4-4 1-2 7 7-7 7-1-2 4-4z fill=currentColor//svg',
    'arrow_left'  = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M20 13v-2H8l4-4-1-2-7 7 7 7 1-2-4-4z fill=currentColor//svg',
    'close'       = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M12 10.9394L5.53033 4.46973L4.46967 5.53039L10.9393 12.0001L4.46967 18.4697L5.53033 19.5304L12 13.0607L18.4697 19.5304L19.5303 18.4697L13.0607 12.0001L19.5303 5.53039L18.4697 4.46973L12 10.9394Z fill=currentColor//svg',
    'menu'        = 'svg viewBox=0 0 36 26 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M1,1.3h34v0.8H1V1.3z M1,12.4h34v0.8H1V12.4z M34.9,23.8H1v0.9h34v-0.9H34.9z fill=currentColor//svg',
    'plus'        = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z fill=currentColor//svg',
    'minus'       = 'svg viewBox=0 0 24 24 fill=none xmlns=http://www.w3.org/2000/svgpath fill-rule=evenodd clip-rule=evenodd d=M6 11h12v2H6z fill=currentColor//svg',
);

My functions trying to call the custom svg icons in functions.php

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

I hope I have explained well, I would be very grateful to anyone who can help me.

Topic theme-twenty-twenty-one svg php Wordpress

Category Web


That's not how that file works, and including it will just load the class definition, it won't create a Twenty_Twenty_One_Child_SVG_Icons object or override Twenty_Twenty_One_SVG_Icons. It's also not how child themes work. Child themes let you override templates specifically, not arbitrary files and classes.

Instead, use the twenty_twenty_one_svg_icons_{$group} filters to modify the array in your child theme. The filter is the best option. E.g. twenty_twenty_one_svg_icons_social. You will also need to filter twenty_twenty_one_social_icons_map so it detects new social network URLs you add.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.