Merge branch 'main' into logo-trapeze

.github/CONTRIBUTING.md

@@ -50,7 +50,7 @@ Please see our [Contributor Code of Conduct](./CODE_OF_CONDUCT.md) for informati
 
 1. Run `npm start` from the root directory to start a local version of the icon test.
 2. Modify the icon test as needed in the `index.html` file.
-
+3. If you are modifying icons, you can run `npm run build.files` to re-run the SVG optimization script to verify there are no changes after optimizing the SVG.
 
 <!-- #### Building Changes
 

.github/workflows/actions/publish-npm/action.yml

@@ -17,7 +17,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - name: Install latest npm
       run: npm install -g npm@latest
       shell: bash

.github/workflows/actions/test-e2e/action.yml

@@ -55,10 +55,8 @@ runs:
         npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
         git add src/\*.png --force
         mkdir updated-screenshots
-        echo 'made dir'
         rsync -R --progress $(git diff --name-only --cached) updated-screenshots
-        echo 'copied images'
-        if [ -d updated-screenshots ]; then
+        if [ "$(ls -A updated-screenshots)" ]; then
           echo "hasUpdatedScreenshots=$(echo 'true')" >> $GITHUB_OUTPUT
           cd updated-screenshots
           ls

.github/workflows/release.yml

@@ -45,8 +45,13 @@ jobs:
         git config user.name ionitron
         git config user.email [email protected]
       shell: bash
+    # This ensures the local version of Lerna is installed
+    # and that we do not use the global Lerna version
+    - name: Install root dependencies
+      run: npm ci
+      shell: bash
     - name: Create GitHub Release
-      run: lerna version ${{ inputs.version }} --yes --force-publish='*' --conventional-commits --create-release github
+      run: npx lerna version ${{ inputs.version }} --yes --force-publish='*' --conventional-commits --create-release github
       env:
         GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       shell: bash
@@ -55,7 +60,7 @@ jobs:
     # so we do that here.
     - name: Bump Package Lock
       run: |
-        lerna exec "npm install --package-lock-only --legacy-peer-deps"
+        npx lerna exec "npm install --package-lock-only --legacy-peer-deps"
         git add .
         git commit -m "chore(): update package lock files"
         git push

CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.2.2](https://github.com/ionic-team/ionicons/compare/v7.2.1...v7.2.2) (2023-12-13)
+
+
+### Bug Fixes
+
+* **icon:** add better warning when loading icons ([#1297](https://github.com/ionic-team/ionicons/issues/1297)) ([d582e62](https://github.com/ionic-team/ionicons/commit/d582e6208e626722e4350426a509a6870e90a0bc))
+
+
+
+
+
+## [7.2.1](https://github.com/ionic-team/ionicons/compare/v7.2.0...v7.2.1) (2023-10-10)
+
+
+### Bug Fixes
+
+* **icon:** font scales without host style ([#1289](https://github.com/ionic-team/ionicons/issues/1289)) ([875bfd8](https://github.com/ionic-team/ionicons/commit/875bfd8300144c62e55a5a76dc2cff8cf1f01bfe))
+
+
+
+
+
+# [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.2"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionicons",
-  "version": "7.1.2",
+  "version": "7.2.2",
   "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",

playwright.config.ts

@@ -52,14 +52,7 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000,
-    toMatchSnapshot: {
-      /**
-       * Increases the maximum allowed pixel difference to account
-       * for slight browser rendering inconsistencies.
-       */
-      maxDiffPixelRatio: 0.02
-    }
+    timeout: 5000
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,

scripts/build.ts

@@ -51,6 +51,16 @@ async function optimizeSvgs(srcSvgData: SvgData[]) {
             if (!Array.isArray(params.attrs)) {
               params.attrs = [params.attrs];
             }
+
+            /**
+             * All host SVG elements must have
+             * the ionicons class otherwise styles
+             * will not apply.
+             */
+            if (item.elem === 'svg') {
+              item.class.add('ionicon');
+            }
+
             if (item.isElem()) {
               item.eachAttr((attr) => {
                 if (attr.name === 'fill') {
@@ -165,14 +175,8 @@ async function optimizeSvg(
   const srcSvgContent = await fs.readFile(svgData.srcFilePath, 'utf8');
 
   const optimizedSvg = await optimizePass.optimize(srcSvgContent, { path: svgData.srcFilePath });
-
-  const optimizedCode = optimizedSvg.data.replace(
-    /<svg (.*?)>/,
-    `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">`,
-  );
-
-  const webComponentSvg = await webComponentPass.optimize(optimizedCode, { path: svgData.srcFilePath });
-  const sourceSvg = await sourcePass.optimize(optimizedCode, { path: svgData.srcFilePath });
+  const webComponentSvg = await webComponentPass.optimize(optimizedSvg.data, { path: svgData.srcFilePath });
+  const sourceSvg = await sourcePass.optimize(optimizedSvg.data, { path: svgData.srcFilePath });
 
   svgData.optimizedSvgContent = webComponentSvg.data;
 

src/components/icon/icon.css

@@ -10,7 +10,6 @@
 
   box-sizing: content-box !important;
 
-  font-size: 1rem;
 }
 
 :host .ionicon {

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/icon.e2e.ts

@@ -8,7 +8,7 @@ test.describe('icon: basic', () => {
     // Wait for all SVGs to be lazily loaded before taking screenshots
     await page.waitForLoadState('networkidle');
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`icon-diff.png`);
+    await expect(page).toHaveScreenshot(`icon-diff.png`, { fullPage: true });
   });
 
   test('some icons should flip when rtl', async ({ page }) => {

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

@@ -126,27 +126,38 @@ describe('addIcons', () => {
     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);
-  });
-
-  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);
+    expect(spy).toHaveBeenCalled();
   });
+
 });

src/components/icon/utils.ts

@@ -40,10 +40,17 @@ export const addIcons = (icons: { [name: string]: string; }) => {
 
 const addToIconMap = (name: string, data: any) => {
   const map = getIconMap();
+
+  const existingIcon = map.get(name);
 
-  if (map.get(name) === undefined) {
+  if (existingIcon === undefined) {
     map.set(name, data);
-  } else {
+
+  /**
+   * 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.`)
   }
 }
@@ -57,7 +64,7 @@ export const getUrl = (i: Icon) => {
 
   url = getName(i.name, i.icon, i.mode, i.ios, i.md);
   if (url) {
-    return getNamedUrl(url);
+    return getNamedUrl(url, i);
   }
 
   if (i.icon) {
@@ -76,12 +83,23 @@ export const getUrl = (i: Icon) => {
 };
 
 
-const getNamedUrl = (iconName: string) => {
+const getNamedUrl = (iconName: string, iconEl: Icon) => {
   const url = getIconMap().get(iconName);
   if (url) {
     return url;
   }
-  return getAssetPath(`svg/${iconName}.svg`);
+  try {
+    return getAssetPath(`svg/${iconName}.svg`);
+  } catch(e) {
+    /**
+     * In the custom elements build version of ionicons, referencing an icon
+     * by name will throw an invalid URL error because the asset path is not defined.
+     * This catches that error and logs something that is more developer-friendly.
+     * We also include a reference to the ion-icon element so developers can
+     * figure out which instance of ion-icon needs to be updated.
+     */
+    console.warn(`[Ionicons Warning]: Could not load icon with name "${iconName}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`, iconEl);
+  }
 };
 
 

src/components/test/dynamic-type/icon.e2e.ts

@@ -13,7 +13,7 @@ test.describe('icon: dynamic type', () => {
 
     const icons = page.locator('#icons');
 
-    expect(await icons.screenshot()).toMatchSnapshot(`icon-dynamic-type-diff.png`);
+    await expect(icons).toHaveScreenshot(`icon-dynamic-type-diff.png`);
   });
 
 });