diff --git a/src/components/icon/test/utils.spec.ts b/src/components/icon/test/utils.spec.ts index 189ae21d6..2bb7308ca 100644 --- a/src/components/icon/test/utils.spec.ts +++ b/src/components/icon/test/utils.spec.ts @@ -86,78 +86,88 @@ describe('getName', () => { describe('addIcons', () => { it('should add an svg to the icon cache', () => { const testData = 'stubbed data'; - + expect(getIconMap().get('logo-ionic')).toEqual(undefined); - + addIcons({ 'logo-ionic': 'stubbed data' }); - + expect(getIconMap().get('logo-ionic')).toEqual(testData); }); - + it('should add kebab and camel case names to the icon cache', () => { const logoIonitron = 'stubbed data'; - + expect(getIconMap().get('logo-ionitron')).toEqual(undefined); expect(getIconMap().get('logoIonitron')).toEqual(undefined); - + addIcons({ logoIonitron }); - + expect(getIconMap().get('logo-ionitron')).toEqual(logoIonitron); expect(getIconMap().get('logoIonitron')).toEqual(logoIonitron); + + const logoIonitron0 = 'stubbed data 0' + + expect(getIconMap().get('logo-ionitron-0')).toEqual(undefined); + expect(getIconMap().get('logoIonitron0')).toEqual(undefined); + + addIcons({ logoIonitron0 }); + + expect(getIconMap().get('logo-ionitron-0')).toEqual(logoIonitron0); + expect(getIconMap().get('logoIonitron0')).toEqual(logoIonitron0); }); - + it('should map to a name that does not match the svg', () => { const logoIonitron = 'stubbed data'; - + expect(getIconMap().get('my-fun-icon')).toEqual(undefined); - + addIcons({ 'my-fun-icon': logoIonitron }); - + expect(getIconMap().get('my-fun-icon')).toEqual(logoIonitron); }); - + it('should map to an explicit camel case name', () => { const logoIonitron = 'stubbed data'; - + expect(getIconMap().get('myCoolIcon')).toEqual(undefined); - + addIcons({ 'myCoolIcon': logoIonitron }); - + expect(getIconMap().get('myCoolIcon')).toEqual(logoIonitron); }); - + it('should not warn when mapping the same icon twice', () => { const spy = jest.spyOn(console, 'warn'); const myIcon = 'my-icon'; - + expect(spy).not.toHaveBeenCalled(); - + addIcons({ myIcon }); - + expect(spy).not.toHaveBeenCalled(); - + addIcons({ myIcon }); - + expect(spy).not.toHaveBeenCalled(); }); - + it('should not overwrite icons', () => { const spy = jest.spyOn(console, 'warn'); - + const logoA = 'logo a'; const logoB = 'logo b'; - + expect(spy).not.toHaveBeenCalled(); - + expect(getIconMap().get('logo-a')).toEqual(undefined); - + addIcons({ 'logo-a': logoB, logoA }); - + expect(getIconMap().get('logo-a')).toEqual(logoB); expect(getIconMap().get('logoA')).toEqual(logoA); - + expect(spy).toHaveBeenCalled(); }); - + }); diff --git a/src/components/icon/utils.ts b/src/components/icon/utils.ts index c95d97297..c1077b76d 100644 --- a/src/components/icon/utils.ts +++ b/src/components/icon/utils.ts @@ -18,9 +18,9 @@ export const getIconMap = (): Map => { }; export const addIcons = (icons: { [name: string]: string; }) => { - Object.keys(icons).forEach(name => { + Object.keys(icons).forEach(name => { addToIconMap(name, icons[name]); - + /** * Developers can also pass in the SVG object directly * and Ionicons can map the object to a kebab case name. @@ -31,7 +31,7 @@ export const addIcons = (icons: { [name: string]: string; }) => { * Using name="addCircleOutline" is valid too, but the * kebab case naming is preferred. */ - const toKebabCase = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(); + const toKebabCase = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z0-9])/g, "$1-$2").toLowerCase(); if (name !== toKebabCase) { addToIconMap(toKebabCase, icons[name]); } @@ -40,12 +40,12 @@ export const addIcons = (icons: { [name: string]: string; }) => { const addToIconMap = (name: string, data: any) => { const map = getIconMap(); - + const existingIcon = map.get(name); if (existingIcon === undefined) { map.set(name, data); - + /** * Importing and defining the same icon reference * multiple times should not yield a warning.