This is a working svg.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<g id="home">
<path fill="#90A4AE" d="M42,48H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36c3.3,0,6,2.7,6,6v36C48,45.3,45.3,48,42,48z"/>
<path fill="#212121" d="M20.8,35.5v-9.6h6.4v9.6h8V22.7H40L24,8.3L8,22.7h4.8v12.8H20.8z"/>
</g>
</svg>
When I try to load it dynamicly with twig I don't have anything rendered
This is what I'm doing
<svg style="display:none;">
<defs>
{% for item in items %}
<g id="{{item.label}}">
{{item.svg}}
</g>
{% endfor %}
</svg>
Later
{% for item in items %}
<li class="nav__items ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<use xlink:href=#{{item.label}}></use>
</svg>
<a href="{{item.target}}">{{item.label}}</a>
</li>
{% endfor %}
When I inspect the resulted html, the use is working. I can find the home content svg inside. But nothing is printed. Of course, if I use it directly without twig it works :(
Thanks