chore: Transform icons html to valid jsx syntax (#17658)

wireapp · Jun 27, 2024 · b855815 · b855815
1 parent 40b01af
commit b855815
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/bin/generate_react_icons.ts b/bin/generate_react_icons.ts
@@ -26,6 +26,18 @@ function capitalize(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+function convertToJsx(html: string): string {
+  // convert attributes to camelCase
+  return html.replace(/<(\w+)([^>]*)\/?>/g, (_, tagName: string, attributes: string) => {
+    // Convert attributes to camelCase
+    const camelCaseAttributes = attributes.trim().replace(/[\w-]+="[^"]*"/g, attr => {
+      const [key, value] = attr.split('=');
+      return `${camelize(key)}=${value}`;
+    });
+    return `<${tagName} ${camelCaseAttributes}>`;
+  });
+}
+
 function camelize(str: string) {
   return str
     .replace(/(?:^\w|[A-Z]|[\b\-_]\w)/g, function (word, index) {
@@ -56,7 +68,7 @@ const reactComponents = svgIcons.map(({name, content}) => {
 
   return `export const ${capitalize(camelize(name.replace(/\.svg$/, '')))} = (props: IconProps) => {
     return <svg width="${baseProps.width}" height="${baseProps.height}" viewBox="${baseProps.viewBox}" aria-hidden="true" {...props}>
-      ${svgElement?.innerHTML}
+      ${convertToJsx(svgElement?.innerHTML ?? '')}
       </svg>;
   };`;
 });