feat: allow passing in only icon SVG data to addIcons (#1256)

Author: liamdebeasi

src/components/icon/test/utils.spec.ts

@@ -1,5 +1,5 @@
 import { Icon } from '../icon';
-import { getName, getSrc, getUrl } from '../utils';
+import { addIcons, getIconMap, getName, getSrc, getUrl } from '../utils';
 
 
 describe('getUrl', () => {
@@ -82,3 +82,71 @@ 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);
+  });
+  
+  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 overwrite icons', () => {
+    const logoA = 'logo a';
+    const logoB = 'logo b';
+    
+    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);
+  });
+  
+  it('passing kebab case key should not generate a camel case key', () => {
+    const logoIonitron = 'stubbed data';
+    
+    expect(getIconMap().get('kebab-key')).toEqual(undefined);
+    expect(getIconMap().get('kebabKey')).toEqual(undefined);
+    
+    addIcons({ 'kebab-key': logoIonitron });
+    
+    expect(getIconMap().get('kebab-key')).toEqual(logoIonitron);
+    expect(getIconMap().get('kebabKey')).toEqual(undefined);
+  });
+});

src/components/icon/utils.ts

@@ -18,10 +18,36 @@ export const getIconMap = (): Map<string, string> => {
 };
 
 export const addIcons = (icons: { [name: string]: string; }) => {
-  const map = getIconMap();
-  Object.keys(icons).forEach(name => map.set(name, icons[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.
+     * Example: addIcons({ addCircleOutline });
+     * This will create an "addCircleOutline" entry and
+     * an "add-circle-outline" entry.
+     * Usage: <ion-icon name="add-circle-outline"></ion-icon>
+     * 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();
+    if (name !== toKebabCase) {
+      addToIconMap(toKebabCase, icons[name]);
+    }
+  });
 };
 
+const addToIconMap = (name: string, data: any) => {
+  const map = getIconMap();
+
+  if (map.get(name) === undefined) {
+    map.set(name, data);
+  } else {
+    console.warn(`[Ionicons Warning]: Multiple icons were mapped to name "${name}". Ensure that multiple icons are not mapped to the same icon name.`)
+  }
+}
+
 
 export const getUrl = (i: Icon) => {
   let url = getSrc(i.src);