0

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/svg"><path 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/svg"><path 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/svg"><path 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/svg"><path 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/svg"><polygon 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/svg"><path 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/svg"><path 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/svg"><path 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/svg"><path 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/svg"><path 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/svg"><path 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/svg"><path 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/svg"><path 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/svg"><path 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.

1 Answer 1

0

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. For example the to filter the social icons use the twenty_twenty_one_svg_icons_social filter in functions.php:

add_filter( 'twenty_twenty_one_svg_icons_social', 'yache_modify_svg_icons' );
function yache_modify_svg_icons( array $social_icons ) : array {
    // modify/add/replace $social_icons here
    $social_icon['500px'] = 'the new 500px inline svg tags';
    return $social_icons;
}

The main icon groups are social and ui, ui will contain the menu and close options, much like social containsthe500pxandtwitter` options.

If you want to modify the URLs, you will also need to filter twenty_twenty_one_social_icons_map so it detects new social network URLs you add.

Note that this is separate from the social/etc icons block in the block editor which use a different system unrelated to this functionality.

6
  • Hi Tom, thanks for the answer! I tried to do it this way function mychildtheme_twentytwenty_svg_icons ( $icons ){ $icons['menu'] = 'mysvgcode'; note: I put mysvgcode to make the comment shorter return $icons; } add_filter( "twenty_twenty_one_svg_icons_{$group}", 'mychildtheme_twentytwenty_svg_icons'); but I am not doing it right, how should I do it to modify the svg menu icon? I don't know what hook_name I should put to add_filter
    – Yache
    Commented Nov 8, 2021 at 17:00
  • {$group} is a placeholder for the SVG icon group that contains the icon you want to modify, e.g. twenty_twenty_one_svg_icons_social, you're not meant to literally put {$group} in the filter name. In this case the menu icon is in the ui group
    – Tom J Nowell
    Commented Nov 8, 2021 at 18:22
  • Great, it worked for me! Thank you very much!
    – Yache
    Commented Nov 8, 2021 at 19:23
  • Awesome! If this answered your question could you consider marking it as the correct answer by clicking the tick button under the votes?
    – Tom J Nowell
    Commented Nov 8, 2021 at 20:37
  • 1
    @popnoodles this isn't a copy paste answer, it tells exactly you what you need to do but it does it in prose, not copy pasta examples. I have made some adjustments to clarify things that changed since such as the block editor, but you will need to read and understand the answer
    – Tom J Nowell
    Commented Dec 21, 2022 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.