fix(icon): fix icon normalization to handle x-times-named icons

src/components/icon/utils.spec.ts

@@ -58,13 +58,36 @@ describe("utils", () => {
       expect(Object.keys(iconCache)).toHaveLength(4);
     });
 
-    it("normalizes icon name", () => {
-      // used internally by fetchIcon
-      expect(normalizeIconName("aZ")).toBe("aZ");
-      expect(normalizeIconName("a-z")).toBe("aZ");
-      expect(normalizeIconName("2d-explore")).toBe("i2DExplore");
+    it("normalizes icon name (used internally by fetchIcon)", () => {
+      expect(normalizeIconName("1-8x")).toBe("i18X");
+      expect(normalizeIconName("1-8X")).toBe("i18X");
+      expect(normalizeIconName("18X")).toBe("i18X");
+
+      expect(normalizeIconName("1x")).toBe("i1X");
+      expect(normalizeIconName("1X")).toBe("i1X");
+
       expect(normalizeIconName("2d-explore")).toBe("i2DExplore");
       expect(normalizeIconName("2DExplore")).toBe("i2DExplore");
+
+      expect(normalizeIconName("360-view")).toBe("i360View");
+      expect(normalizeIconName("360View")).toBe("i360View");
+
+      expect(normalizeIconName("a-z")).toBe("aZ");
+      expect(normalizeIconName("aZ")).toBe("aZ");
+
+      expect(normalizeIconName("attachment")).toBe("attachment");
+
+      expect(normalizeIconName("classify-pixels")).toBe("classifyPixels");
+      expect(normalizeIconName("classifyPixels")).toBe("classifyPixels");
+
+      expect(normalizeIconName("display-selection-lock")).toBe("displaySelectionLock");
+      expect(normalizeIconName("displaySelectionLock")).toBe("displaySelectionLock");
+
+      expect(normalizeIconName("number-circle-6")).toBe("numberCircle6");
+      expect(normalizeIconName("numberCircle6")).toBe("numberCircle6");
+
+      expect(normalizeIconName("x-axis-guide")).toBe("xAxisGuide");
+      expect(normalizeIconName("xAxisGuide")).toBe("xAxisGuide");
     });
   });
 });

src/components/icon/utils.ts

@@ -58,24 +58,31 @@ export async function fetchIcon({ icon, scale }: FetchIconProps): Promise<Calcit
  * Normalize the icon name to match the path data module exports.
  * Exported for testing purposes.
  *
- * @param name
+ * @param name – an icon name that can be either kebab or camel-cased
  * @private
  */
 export function normalizeIconName(name: string): string {
   const numberLeadingName = !isNaN(Number(name.charAt(0)));
   const parts = name.split("-");
+  const kebabCased = parts.length > 0;
 
-  if (parts.length === 1) {
-    return numberLeadingName ? `i${name}` : name;
-  }
+  if (kebabCased) {
+    const firstNonDigitInPartPattern = /[a-z]/i;
+
+    name = parts
+      .map((part, partIndex) => {
+        return part.replace(firstNonDigitInPartPattern, function replacer(match, offset) {
+          const isFirstCharInName = partIndex === 0 && offset === 0;
 
-  return parts
-    .map((part, index) => {
-      if (index === 0) {
-        return numberLeadingName ? `i${part.toUpperCase()}` : part;
-      }
+          if (isFirstCharInName) {
+            return match;
+          }
+
+          return match.toUpperCase();
+        });
+      })
+      .join("");
+  }
 
-      return part.charAt(0).toUpperCase() + part.slice(1);
-    })
-    .join("");
+  return numberLeadingName ? `i${name}` : name;
 }