WordPress svg_icon函数异常：仅输出首个config数组图标求助

问题根源 #

你的函数存在两个关键错误：

1. $config数组中每个图标被不必要地包裹在单元素数组中，后续逻辑完全没有从这个数组里取出实际的SVG内容
2. 处理SVG时错误地使用了$atts['icon']（即你传入的图标键名，比如hamburger），而非从$config中获取对应的SVG字符串

修正方案 #

步骤1：简化$config数组结构

去掉每个图标值外层的数组包裹，直接存储SVG字符串：

$config = [
    'arrow' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>',
    'hamburger' => '<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m13 16.745c0-.414-.336-.75-.75-.75h-9.5c-.414 0-.75.336-.75.75s.336.75.75.75h9.5c.414 0 .75-.336.75-.75zm9-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm-4-5c0-.414-.336-.75-.75-.75h-14.5c-.414 0-.75.336-.75.75s.336.75.75.75h14.5c.414 0 .75-.336.75-.75z" fill-rule="nonzero"/></svg>',
    'close' => '<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm0 7.425 2.717-2.718c.146-.146.339-.219.531-.219.404 0 .75.325.75.75 0 .193-.073.384-.219.531l-2.717 2.717 2.727 2.728c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.384-.073-.53-.219l-2.729-2.728-2.728 2.728c-.146.146-.338.219-.53.219-.401 0-.751-.323-.751-.75 0-.192.073-.384.22-.531l2.728-2.728-2.722-2.722c-.146-.147-.219-.338-.219-.531 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" fill-rule="nonzero"/></svg>'
];

步骤2：修正SVG内容获取逻辑

将原本错误的trim($atts['icon'])替换为从$config中取出对应图标的SVG字符串：

$svg = preg_replace('/^<svg /', $repl, trim($config[$atts['icon']]));

完整修正后的函数 #

function svg_icon($atts = array()) {
    $atts = shortcode_atts([
        'icon' => false,
        'label' => false,
    ], $atts);

    if (empty($atts['icon']))
        return;

    $config = [
        'arrow' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>',
        'hamburger' => '<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m13 16.745c0-.414-.336-.75-.75-.75h-9.5c-.414 0-.75.336-.75.75s.336.75.75.75h9.5c.414 0 .75-.336.75-.75zm9-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm-4-5c0-.414-.336-.75-.75-.75h-14.5c-.414 0-.75.336-.75.75s.336.75.75.75h14.5c.414 0 .75-.336.75-.75z" fill-rule="nonzero"/></svg>',
        'close' => '<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm0 7.425 2.717-2.718c.146-.146.339-.219.531-.219.404 0 .75.325.75.75 0 .193-.073.384-.219.531l-2.717 2.717 2.727 2.728c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.384-.073-.53-.219l-2.729-2.728-2.728 2.728c-.146.146-.338.219-.53.219-.401 0-.751-.323-.751-.75 0-.192.073-.384.22-.531l2.728-2.728-2.722-2.722c-.146-.147-.219-.338-.219-.531 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" fill-rule="nonzero"/></svg>'
    ];

    if (array_key_exists($atts['icon'], $config)) {
        $repl = '<svg aria-hidden="true" role="img" focusable="false" ';
        $svg = preg_replace('/^<svg /', $repl, trim($config[$atts['icon']]));

        $svg = preg_replace("/([\n\t]+)/", ' ', $svg); // 移除换行和制表符
        $svg = preg_replace('/>\s*</', '><', $svg); // 移除SVG标签间的空白

        if (!empty($atts['label'])) {
            $svg = str_replace('<svg ', '<svg aria-label="'. esc_attr($atts['label']) .'"', $svg);
            $svg = str_replace('aria-hidden="true"', '', $svg);
        }

        return $svg;
    }
}

验证调用 #

现在可以正确输出指定图标：

// 输出汉堡菜单图标
echo svg_icon([
    'icon' => 'hamburger',
    'label' => 'Main Menu',
]);

// 输出关闭图标
echo svg_icon(['icon' => 'close']);

内容的提问来源于stack exchange，提问作者Rahat