Feature 7.2

CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.2.0](https://github.com/ionic-team/ionicons/compare/v7.1.2...v7.2.0) (2023-10-10)
+
+
+### Bug Fixes
+
+* **icon:** mapping same icon does not warn ([#1279](https://github.com/ionic-team/ionicons/issues/1279)) ([8297018](https://github.com/ionic-team/ionicons/commit/8297018cb591f5e33a815ceb9e4e765271ecf5ad))
+* **icon:** verify the icon loads in the lifecycle ([#1278](https://github.com/ionic-team/ionicons/issues/1278)) ([7f7f346](https://github.com/ionic-team/ionicons/commit/7f7f346af47f45531046e1d2f1a88f53acee77fa))
+
+
+### Features
+
+* allow passing in only icon SVG data to addIcons ([#1256](https://github.com/ionic-team/ionicons/issues/1256)) ([1e33313](https://github.com/ionic-team/ionicons/commit/1e3331347328c11a8b4c58c9200059bfd76b0e59))
+* **icon:** support for dynamic type ([#1246](https://github.com/ionic-team/ionicons/issues/1246)) ([45c04dd](https://github.com/ionic-team/ionicons/commit/45c04dda6c905e535083b171cead374b1c993afa))
+
+
+
+
+
 ## [7.1.2](https://github.com/ionic-team/ionicons/compare/v7.1.1...v7.1.2) (2023-05-30)
 
 

lerna.json

@@ -2,5 +2,5 @@
   "packages": [
     "./"
   ],
-  "version": "7.1.2"
+  "version": "7.2.0"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionicons",
-  "version": "7.1.2",
+  "version": "7.2.0",
   "description": "Premium icons for Ionic.",
   "files": [
     "components/",
@@ -23,7 +23,7 @@
     "test.spec": "stencil test --spec"
   },
   "dependencies": {
-    "@stencil/core": "^2.18.0"
+    "@stencil/core": "^4.0.3"
   },
   "devDependencies": {
     "@playwright/test": "^1.33.0",

src/components/icon/icon.tsx

@@ -12,6 +12,7 @@ export class Icon {
   private io?: IntersectionObserver;
   private iconName: string | null = null;
   private inheritedAttributes: { [k: string]: any } = {};
+  private didLoadIcon = false;
 
   @Element() el!: HTMLElement;
 
@@ -94,6 +95,18 @@ export class Icon {
     });
   }
 
+  componentDidLoad() {
+    /**
+     * Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
+     * This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
+     * This modification pertains to the usage of Angular's binding syntax:
+     * `<ion-icon [name]="myIconName"></ion-icon>`
+     */
+    if (!this.didLoadIcon) {
+      this.loadIcon();
+    }
+  }
+
   disconnectedCallback() {
     if (this.io) {
       this.io.disconnect();
@@ -138,6 +151,7 @@ export class Icon {
           // async if it hasn't been loaded
           getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
         }
+        this.didLoadIcon = true;
       }
     }
 

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,82 @@ 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 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();
+  });
+
+});

src/components/icon/utils.ts

@@ -18,10 +18,43 @@ 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();
+
+  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.
+   */
+  } else if (existingIcon !== data) {
+    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);

stencil.config.ts

@@ -3,6 +3,7 @@ import { Config } from '@stencil/core';
 export const config: Config = {
   namespace: 'ionicons',
   buildEs5: 'prod',
+  sourceMap: false,
   outputTargets: [
     {
       type: 'dist',