Wrapping container for SVG

Thanks in advance on this. I am trying to add a container around the exported SVG. In this case a <div>. So what is returned would look like this:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" {...props}>
         .......
    </svg>
</div>

I am following the example under Custom Templates and looked through the issues and found this solution thinking it would work. Cannot use JSX in custom template

function template({ template }, opts, { imports, componentName, props, jsx, exports }) {
  const jsxTemplate = template.smart({ plugins: ['jsx'] });
  return jsxTemplate.ast`${imports}
  const ${componentName} = (${props}) => <div>{${jsx}}</div>
  ${exports}
`;
}

module.exports = template;

But I end up with

<div>
    {
        <svg>

Is there a way to prepend and append content before the ${jsx} is returned?

[bkilrain]

I’m also experiencing this problem. If @gregberge 's suggested fix here doesn’t work, can this ticket be reclassified as a bug?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.