Merge branch 'feature-7.3.0' into logo-yahoo

.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,18 +45,32 @@ 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
- # Lerna does not automatically bump versions
- # of Ionicons dependencies that have changed,
- # so we do that here.
- - name: Bump Package Lock
- run: |
- lerna exec "npm install --package-lock-only --legacy-peer-deps"
- git add .
- git commit -m "chore(): update package lock files"
- git push
- shell: bash
+
+ update-package-lock:
+ # This needs to run after finalize-release
+ # because we also push to the repo in that
+ # job. If these jobs ran in parallel then it is
+ # possible for them to push at the same time.
+ needs: [finalize-release]
+ runs-on: ubuntu-latest
+ steps:
+ # Lerna does not automatically bump versions
+ # of Ionicons dependencies that have changed,
+ # so we do that here.
+ - name: Bump Package Lock
+ run: |
+ npx lerna exec "npm install --package-lock-only --legacy-peer-deps"
+ git add .
+ git commit -m "chore(): update package lock files"
+ git push
+ shell: bash

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",
@@ -74,5 +74,6 @@
  "license": "MIT",
  "sideEffects": [
  "icons/imports/"
- ]
+ ],
+ "web-types": "dist/ionic.web-types.json"
 }

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

@@ -31,6 +31,8 @@ async function build(rootDir: string) {
 
  await createCheatsheet(version, rootDir, distDir, svgSymbolsContent, srcSvgData);
 
+ await createWebTypes(version, rootDir, distDir, srcSvgData);
+
  await copyToTesting(rootDir, distDir, srcSvgData);
  } catch (e) {
  console.error(e);
@@ -51,6 +53,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 +177,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;
 
@@ -269,6 +275,31 @@ async function createCheatsheet(
  await fs.writeFile(distCheatsheetFilePath, html);
 }
 
+async function createWebTypes(
+ version: string,
+ rootDir: string,
+ distDir: any,
+ srcSvgData: SvgData[]
+) {
+ const srcWebTypeFilePath = join(rootDir, 'src/ionicons.web-types.json');
+ const distWebTypesFilePath = join(distDir, 'ionicons.web-types.json');
+
+ const webTypes = JSON.parse(await fs.readFile(srcWebTypeFilePath, 'utf8'))
+
+ webTypes.version = version
+
+ const icons = webTypes.contributions.html.ionicons
+ for (let data of srcSvgData) {
+ icons.push({
+ name: data.iconName,
+ icon: "dist/svg/" + data.fileName
+ })
+ }
+
+ const jsonStr = JSON.stringify(webTypes, null, 2) + '\n';
+ await fs.writeFile(distWebTypesFilePath, jsonStr);
+}
+
 async function getSvgs(srcSvgDir: string, distSvgDir: string, distIoniconsDir: string): Promise<SvgData[]> {
  const optimizedSvgDir = join(distIoniconsDir, 'svg');
  await fs.emptyDir(optimizedSvgDir);

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