Icons: Fix invalid svg attributes and React element generation logic

packages/icons/lib/generate-library.cjs

@@ -5,6 +5,7 @@ const path = require( 'path' );
 const { readdir, readFile, writeFile } = require( 'fs' ).promises;
 const { execFile } = require( 'child_process' );
 const { promisify } = require( 'util' );
+const { camelCase } = require( 'change-case' );
 
 /**
  * Internal dependencies
@@ -15,6 +16,88 @@ const execFileAsync = promisify( execFile );
 
 const ICON_LIBRARY_DIR = path.join( __dirname, '..', 'src', 'library' );
 
+/**
+ *  List of SVG attributes whose names need to be converted from kebab-case
+ * to camelCase when transforming SVG into JSX elements.
+ *
+ * List from: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute.
+ */
+const SVG_ATTRIBUTE_WITH_DASHES = [
+	'accent-height',
+	'alignment-baseline',
+	'arabic-form',
+	'baseline-shift',
+	'cap-height',
+	'clip-path',
+	'clip-rule',
+	'color-interpolation',
+	'color-interpolation-filters',
+	'color-profile',
+	'color-rendering',
+	'dominant-baseline',
+	'enable-background',
+	'fill-opacity',
+	'fill-rule',
+	'flood-color',
+	'flood-opacity',
+	'font-family',
+	'font-size',
+	'font-size-adjust',
+	'font-stretch',
+	'font-style',
+	'font-variant',
+	'font-weight',
+	'glyph-name',
+	'glyph-orientation-horizontal',
+	'glyph-orientation-vertical',
+	'horiz-adv-x',
+	'horiz-origin-x',
+	'image-rendering',
+	'letter-spacing',
+	'lighting-color',
+	'marker-end',
+	'marker-mid',
+	'marker-start',
+	'overline-position',
+	'overline-thickness',
+	'paint-order',
+	'panose-1',
+	'pointer-events',
+	'rendering-intent',
+	'shape-rendering',
+	'stop-color',
+	'stop-opacity',
+	'strikethrough-position',
+	'strikethrough-thickness',
+	'stroke-dasharray',
+	'stroke-dashoffset',
+	'stroke-linecap',
+	'stroke-linejoin',
+	'stroke-miterlimit',
+	'stroke-opacity',
+	'stroke-width',
+	'text-anchor',
+	'text-decoration',
+	'text-rendering',
+	'underline-position',
+	'underline-thickness',
+	'unicode-bidi',
+	'unicode-range',
+	'units-per-em',
+	'v-alphabetic',
+	'v-hanging',
+	'v-ideographic',
+	'v-mathematical',
+	'vector-effect',
+	'vert-adv-y',
+	'vert-origin-x',
+	'vert-origin-y',
+	'word-spacing',
+	'writing-mode',
+	'xmlns-xlink',
+	'x-height',
+];
+
 // - Find *.svg files in ./library
 // - For each, generate a sibling .tsx file
 // - Build an index of these at ./library/index.ts
@@ -151,6 +234,27 @@ function svgToTsx( svgContent ) {
 
 	jsxContent = jsxContent.replace( /\sclass=/g, ' className=' );
 
+	// Convert SVG attribute names to JSX-friendly camelCase.
+	const kebabCaseToCamelCaseMap = SVG_ATTRIBUTE_WITH_DASHES.reduce(
+		( map, kebabCase ) => {
+			map[ kebabCase ] = camelCase( kebabCase );
+			return map;
+		},
+		{}
+	);
+
+	// Replace SVG attribute names with camel-case equivalents.
+	jsxContent = jsxContent.replace(
+		/\s([a-zA-Z][\w-]*)=/g,
+		( match, attrName ) => {
+			const camel = kebabCaseToCamelCaseMap[ attrName ];
+			if ( camel ) {
+				return ` ${ camel }=`;
+			}
+			return match;
+		}
+	);
+
 	// Tags that ought to be converted to WordPress primitives when converting
 	// SVGs to React elements
 	const primitives = {

packages/icons/package.json

@@ -45,7 +45,8 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@wordpress/element": "file:../element",
-		"@wordpress/primitives": "file:../primitives"
+		"@wordpress/primitives": "file:../primitives",
+		"change-case": "4.1.2"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0"