feat: add switch to toggle b/w html & jsx compatible code

index.html

@@ -61,6 +61,10 @@ <h1 class="title">
     <div class="controls">
       <a class="control control-download" href="" id="download">Download SVG image</a>
       <button class="control control-copy" id="copy">Copy code to clipboard</button>
+      <div>
+        <input type="checkbox" id="react-checkbox" name="react-checkbox" />
+        <label for="react-checkbox">JSX Compatible</label>
+      </div>
     </div>
 
     <div class="preview-title-container">

index.js

@@ -8,6 +8,7 @@ import './codemirror/mode/xml/xml.js'
   const download = document.getElementById('download')
   const copy = document.getElementById('copy')
   const previewBg = document.getElementById('preview-bg')
+  const react = document.getElementById('react-checkbox')
   let code = ''
   let theme = 'default'
 
@@ -34,15 +35,123 @@ import './codemirror/mode/xml/xml.js'
     return 'data:image/svg+xml,' + encodeURIComponent(svgAsXML)
   }
 
+  const ATTRIBUTE_MAPPING = {
+    'class': 'className',
+    'accent-height': 'accentHeight',
+    'alignment-baseline': 'alignmentBaseline',
+    'arabic-form': 'arabicForm',
+    'baseline-shift': 'baselineShift',
+    'cap-height': 'capHeight',
+    'clip-path': 'clipPath',
+    'clip-rule': 'clipRule',
+    'color-interpolation': 'colorInterpolation',
+    'color-interpolation-filters': 'colorInterpolationFilters',
+    'color-profile': 'colorProfile',
+    'color-rendering': 'colorRendering',
+    'dominant-baseline': 'dominantBaseline',
+    'enable-background': 'enableBackground',
+    'fill-opacity': 'fillOpacity',
+    'fill-rule': 'fillRule',
+    'flood-color': 'floodColor',
+    'flood-opacity': 'floodOpacity',
+    'font-family': 'fontFamily',
+    'font-size': 'fontSize',
+    'font-size-adjust': 'fontSizeAdjust',
+    'font-stretch': 'fontStretch',
+    'font-style': 'fontStyle',
+    'font-variant': 'fontVariant',
+    'font-weight': 'fontWeight',
+    'glyph-name': 'glyphName',
+    'glyph-orientation-horizontal': 'glyphOrientationHorizontal',
+    'glyph-orientation-vertical': 'glyphOrientationVertical',
+    'horiz-adv-x': 'horizAdvX',
+    'horiz-origin-x': 'horizOriginX',
+    'image-rendering': 'imageRendering',
+    'letter-spacing': 'letterSpacing',
+    'lighting-color': 'lightingColor',
+    'marker-end': 'markerEnd',
+    'marker-mid': 'markerMid',
+    'marker-start': 'markerStart',
+    'overline-position': 'overlinePosition',
+    'overline-thickness': 'overlineThickness',
+    'paint-order': 'paintOrder',
+    'panose-1': 'panose1',
+    'pointer-events': 'pointerEvents',
+    'rendering-intent': 'renderingIntent',
+    'shape-rendering': 'shapeRendering',
+    'stop-color': 'stopColor',
+    'stop-opacity': 'stopOpacity',
+    'strikethrough-position': 'strikethroughPosition',
+    'strikethrough-thickness': 'strikethroughThickness',
+    'stroke-dasharray': 'strokeDasharray',
+    'stroke-dashoffset': 'strokeDashoffset',
+    'stroke-linecap': 'strokeLinecap',
+    'stroke-linejoin': 'strokeLinejoin',
+    'stroke-miterlimit': 'strokeMiterlimit',
+    'stroke-opacity': 'strokeOpacity',
+    'stroke-width': 'strokeWidth',
+    'text-anchor': 'textAnchor',
+    'text-decoration': 'textDecoration',
+    'text-rendering': 'textRendering',
+    'underline-position': 'underlinePosition',
+    'underline-thickness': 'underlineThickness',
+    'unicode-bidi': 'unicodeBidi',
+    'unicode-range': 'unicodeRange',
+    'units-per-em': 'unitsPerEm',
+    'v-alphabetic': 'vAlphabetic',
+    'v-hanging': 'vHanging',
+    'v-ideographic': 'vIdeographic',
+    'v-mathematical': 'vMathematical',
+    'vector-effect': 'vectorEffect',
+    'vert-adv-y': 'vertAdvY',
+    'vert-origin-x': 'vertOriginX',
+    'vert-origin-y': 'vertOriginY',
+    'word-spacing': 'wordSpacing',
+    'writing-mode': 'writingMode',
+    'x-height': 'xHeight',
+    'xlink:actuate': 'xlinkActuate',
+    'xlink:arcrole': 'xlinkArcrole',
+    'xlink:href': 'xlinkHref',
+    'xlink:role': 'xlinkRole',
+    'xlink:show': 'xlinkShow',
+    'xlink:title': 'xlinkTitle',
+    'xlink:type': 'xlinkType',
+    'xml:base': 'xmlBase',
+    'xml:lang': 'xmlLang',
+    'xml:space': 'xmlSpace',
+    'xmlns:xlink': 'xmlnsXlink'
+  }
+
+  function htmlToJsx(htmlStr) {
+    let result = htmlStr
+    for (const [ htmlAttr, jsxAttr ] of Object.entries(ATTRIBUTE_MAPPING)) {
+      const escapedHtmlAttr = htmlAttr.replace(/:/g, '\\:')
+      const regex = new RegExp(`\\b${escapedHtmlAttr}\\s*=`, 'g')
+      result = result.replace(regex, `${jsxAttr}=`)
+    }
+    return result
+  }
+
+  function jsxToHtml(jsxStr) {
+    let result = jsxStr
+    for (const [ htmlAttr, jsxAttr ] of Object.entries(ATTRIBUTE_MAPPING)) {
+      const regex = new RegExp(`\\b${jsxAttr}\\s*=`, 'g')
+      result = result.replace(regex, `${htmlAttr}=`)
+    }
+    return result
+  }
+
   function readFile(event) {
     const value = (event.target && event.target.result) || event
     if (event.target && event.target.result) {
-      editor.setValue(value)
+      const editorValue = react.checked ? htmlToJsx(value) : value
+      editor.setValue(editorValue)
     }
-    const fragment = document.createRange().createContextualFragment(value)
+    const standardSvg = react.checked ? jsxToHtml(value) : value
+    const fragment = document.createRange().createContextualFragment(standardSvg)
     if (fragment.querySelector('svg')) {
-      preview.innerHTML = value
-      code = value
+      preview.innerHTML = standardSvg
+      code = react.checked ? htmlToJsx(standardSvg) : standardSvg
       copy.removeAttribute('disabled')
       const svg = preview.querySelector('svg')
       download.href = svgDataURL(svg)
@@ -81,10 +190,21 @@ import './codemirror/mode/xml/xml.js'
     preview.style.background = e?.target?.value || '#e3e3e3'
   }
 
+  function handleReactChange() {
+    const value = editor.getValue()
+    if (!value) return
+    if (react.checked) {
+      editor.setValue(htmlToJsx(value))
+    } else {
+      editor.setValue(jsxToHtml(value))
+    }
+  }
+
   input.addEventListener('change', changeFile)
   copy.addEventListener('click', handleCopy)
   download.addEventListener('click', handleDownload)
   previewBg.addEventListener('input', handlePreviewBgChange)
+  react.addEventListener('change', handleReactChange)
 
   handlePreviewBgChange()
 })()