fix(icon): icon names with numbers are correctly converted to kebab case (#1339)

resolves #1338

---------

Co-authored-by: Nico Tasche <[email protected]>

Author: MasonVX

Diff for: 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 for: src/components/icon/utils.ts

@@ -18,9 +18,9 @@ export const getIconMap = (): Map<string, string> => {
 };
 
 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.