diff --git a/src/components/icon/utils.spec.ts b/src/components/icon/utils.spec.ts index e8090481baa..f3e766a412f 100644 --- a/src/components/icon/utils.spec.ts +++ b/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"); }); }); }); diff --git a/src/components/icon/utils.ts b/src/components/icon/utils.ts index ab665c936d7..0a2d071f325 100644 --- a/src/components/icon/utils.ts +++ b/src/components/icon/utils.ts @@ -58,24 +58,31 @@ export async function fetchIcon({ icon, scale }: FetchIconProps): Promise 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; }