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