Solid compiler fails to handle SVGs with style tags, i.e. {} present

[jceb]

Since change #89 I get the following error message for duotone FontAwesome icons (integration see here: #12 (comment)). Non-duotone icons work fine:

[plugin:solid] /app/packages/ui/~icons/fap-duotone/truck-loading.tsx: Unexpected token, expected "}" (1:192)

> 1 | export default (props = {}) => <svg height="1.2em" width="1.2em" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 512"{...props}><defs><style>.fa-secondary{opacity:.4}</style></defs><path d="M247.8 123.8a16 16 0 0 0-19.6-11.3L151 133.3l24.8 92.7-61.8 16.5-24.8-92.7-77.3 20.7A16 16 0 0 0 .6 190.1l49.6 185.5a16 16 0 0 0 19.6 11.3l216.4-58a16 16 0 0 0 11.3-19.6zM544 320a96 96 0 1 0 96 96 96 96 0 0 0-96-96z" class="fa-secondary" fill="currentColor"/><path d="M384 0a32 32 0 0 0-32 32v323.6L5.9 450a8 8 0 0 0-5.6 9.8l12.6 46.3a8 8 0 0 0 9.8 5.6l393.7-107.4c0 .33 0 .66.05 1C421.91 339.7 477 288 544 288a127.71 127.71 0 0 1 96 43.44V0zM175.8 226L151 133.3l-61.8 16.5 24.8 92.7z" class="fa-primary" fill="currentColor"/></svg>
    |       
~icons/fap-duotone/truck-loading.tsx:1:192
    at Object._raise (/app/node_modules/@babel/parser/lib/index.js:510:17)
    at Object.raiseWithData (/app/node_modules/@babel/parser/lib/index.js:503:17)
    at Object.raise (/app/node_modules/@babel/parser/lib/index.js:464:17)
    at Object.unexpected (/app/node_modules/@babel/parser/lib/index.js:3368:16)
    at Object.expect (/app/node_modules/@babel/parser/lib/index.js:3342:28)
    at Object.jsxParseExpressionContainer (/app/node_modules/@babel/parser/lib/index.js:7114:10)
    at Object.jsxParseElementAt (/app/node_modules/@babel/parser/lib/index.js:7205:36)
    at Object.jsxParseElementAt (/app/node_modules/@babel/parser/lib/index.js:7190:32)
    at Object.jsxParseElementAt (/app/node_modules/@babel/parser/lib/index.js:7190:32)
    at Object.jsxParseElement (/app/node_modules/@babel/parser/lib/index.js:7248:17                                                                                                                                                                                           ^

This, i.e. the content of the <style> tag, breaks it: secondary{opacity:.4} as solid tries to interpret it.

Apparently the right solution (facebook/react#1545) is to escape { as {'{'} (sveltejs/svelte#1318).

Adding svg.replace(/([{}])/ig, "{'$1'}") before the props injecting works for me but it's a blunt method that might not work in all cases. @jfgodoy @dephiros what do you think?