And do not redefine svg objects on each use it, reuse defined objects instead e.g.
css
#svg_sources {
position: fixed;
top: 0;
left: 0;
}
html
<html xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg">
<head>
...
</head>
<body>
<div id="svg_sources">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="0" height="0">
<defs>
<g id="menu_lines">
<line x1="3" y1="0" x2="3.01" y2="0" />
<line x1="8" y1="0" x2="21" y2="0" />
</g>
<g id="menu_icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
<use xlink:href="#menu_lines" transform="translate(0,6)" />
<use xlink:href="#menu_lines" transform="translate(0,12)" />
<use xlink:href="#menu_lines" transform="translate(0,18)" />
</g>
<polyline id="menu_bullet" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list" points="9 18 15 12 9 6" />
</defs>
</svg>
</div>
php
function print_recursive($list){
echo '<ul style="list-style-type:none">';
foreach($list as $item){
echo '<li id="'.$item['id'].'"><a href="javacript:void(0);"><svg width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#menu_bullet" /></svg>'.$item['text'];
if( isset($item['children']) ){
print_recursive($item['children']);
}
echo '</li>';
}
echo '</ul>';
}
echo '<svg width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#menu_icon" /></svg>';
print_recursive($list);