替换《二十一世纪》中的自定义SVG图标

我试图研究如何用子主题替换父主题的一些图标，但我没能做到。我正在尝试替换二十一个SVG图标中的SVG图标。php文件，特别是菜单和关闭图标。在我的子主题中，我创建了classes文件夹并复制了相同的svg图标文件，但当我尝试在我的子主题函数中调用它时。php，它不工作，我可能使用了错误的函数。

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>\',
);

正如你所看到的，目前我将在父主题中替换它，但这不是我的想法。

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\' );

我希望我解释得很好，我将非常感谢任何能帮助我的人。

小码农CODE

相关推荐

如何包含用作特色图像的SVG文件？