<symbol> causes an import error?

Was trying to make an svg sprite work, and encountered some behaviour I can't explain. Not sure if it's a bug or I'm missing something, if it's the latter I apologise in advance, but: This works ```html <svg fill="none" viewBox="0 0 399 398"> <symbol id="circle"></symbol> <circle cx="50" cy="50" r="50" fill="white" /> </svg> ``` This doesn't ```html <svg fill="none" viewBox="0 0 399 398"> <symbol id="circle"> <circle cx="50" cy="50" r="50" fill="white" /> </symbol> </svg> ``` And throws the following error ``` code: 'BABEL_PARSE_ERROR', reasonCode: 'UnexpectedToken', loc: Position { line: 1, column: 70, index: 70 }, pos: 70, syntaxPlugin: undefined, plugin: 'solid-svg', id: '{...}/socialSprite.svg?component-solid', pluginCode: 'export default (props = {}) => <svg fill="none" viewBox="0 0 399 398"/{...props}>', frame: '1 | export default (props = {}) => <svg fill="none" viewBox="0 0 399 398"/{...props}>\n' + ' | ^' }, statusCode: 500, fatal: false, unhandled: true, statusMessage: undefined, data: undefined } ``` Am I missing something? Is this expected? If so, is there a way to make this work? Here's a link to [stackblitz](https://stackblitz.com/edit/solidjs-templates-3petcj?file=src%2Frandom.svg) relevant file is random.svg. Thanks!