escaping curly braces before parsing as JSX

src/escape.js

@@ -0,0 +1,11 @@
+/* If the SVG has text that has curly braces, or
+if there is a <style> element (which will, of
+course, have curly braces) then we need to
+escape those for JSX parsing. */
+export default function escape(raw) {
+  // converts
+  // <style> .class1 {} .class2{}</style>
+  // to
+  // <style> .class1 {`{`}{`}`} .class2{`{`}{`}`}</style>
+  return raw.replace(/(\{|\})/g, '{`$1`}');
+}

src/index.js

@@ -4,6 +4,7 @@ import template from 'babel-template';
 import traverse from 'babel-traverse';
 import { parse } from 'babylon';
 import optimize from './optimize';
+import escape from './escape';
 import transformSvg from './transformSvg';
 
 const buildSvg = template(`
@@ -32,8 +33,9 @@ export default ({ types: t }) => ({
         const svgPath = join(dirname(iconPath), path.node.source.value);
         const svgSource = readFileSync(svgPath, 'utf8');
         const optimizedSvgSource = optimize(svgSource);
+        const escapeSvgSource = escape(optimizedSvgSource);
 
-        const parsedSvgAst = parse(optimizedSvgSource, {
+        const parsedSvgAst = parse(escapeSvgSource, {
           sourceType: 'module',
           plugins: ['jsx'],
         });