How to make SVG's width and height of the same as children?

Question

I'm using <use> to "grab" a <symbol> from an external SVG, the <use> element is the right size (100x100), but the <svg> still is the default (300x150). Is there any (non-JS) way to make it the child's size in non-hardcoded way?

HTML:

<svg><use href="icon.svg#icon" /></svg>

SVG:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon" viewBox="0 0 100 100" width="100" height="100">
        <rect width="100" height="100" />
    </symbol>
</svg>

What I've tried without success:

• min-content/fit-content width and height.
• Not using the <svg> element and adding xmlns="http://www.w3.org/2000/svg" on <use>.