fix(icon): update to ionicons 6 to resolve typescript 4.4 errors (#24185)

This commit is contained in:
Liam DeBeasi
2021-11-08 16:59:30 -05:00
committed by GitHub
parent 52cd5d0cce
commit 118c606703
10 changed files with 58 additions and 39 deletions

View File

@ -15,6 +15,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Components](#components) - [Components](#components)
* [Datetime](#datetime) * [Datetime](#datetime)
* [Header](#header) * [Header](#header)
* [Icons](#icons)
* [Input](#input) * [Input](#input)
* [Modal](#modal) * [Modal](#modal)
* [Popover](#popover) * [Popover](#popover)
@ -91,6 +92,10 @@ ion-header.header-collapse-condense ion-toolbar:last-of-type {
} }
``` ```
#### Icons
Ionic 6 now ships with Ionicons 6. Please be sure to review the [Ionicons 6.0.0 Changelog](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) and make any necessary changes.
#### Input #### Input
The `placeholder` property now has a type of `string | undefined` rather than `null | string | undefined`. The `placeholder` property now has a type of `string | undefined` rather than `null | string | undefined`.

View File

@ -576,13 +576,13 @@ export class IonHeader {
export declare interface IonIcon extends Components.IonIcon {} export declare interface IonIcon extends Components.IonIcon {}
@ProxyCmp({ @ProxyCmp({
inputs: ['ariaHidden', 'ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'] inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src']
}) })
@Component({ @Component({
selector: 'ion-icon', selector: 'ion-icon',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>', template: '<ng-content></ng-content>',
inputs: ['ariaHidden', 'ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'] inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src']
}) })
export class IonIcon { export class IonIcon {
protected el: HTMLElement; protected el: HTMLElement;

14
core/package-lock.json generated
View File

@ -10,7 +10,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@stencil/core": "~2.10.0", "@stencil/core": "~2.10.0",
"ionicons": "^5.5.4", "ionicons": "^6.0.0",
"tslib": "^2.1.0" "tslib": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {
@ -5549,9 +5549,9 @@
} }
}, },
"node_modules/ionicons": { "node_modules/ionicons": {
"version": "5.5.4", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.4.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
"integrity": "sha512-3ph8X9my3inhabWEZ7N0XRA0MnnNQ1v9a602mLNgWsIXnxE9G5BybIZ/pws/OZZ/hoNlvSjk801N03yL9/FNgQ==", "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
"dependencies": { "dependencies": {
"@stencil/core": "~2.10.0" "@stencil/core": "~2.10.0"
} }
@ -18407,9 +18407,9 @@
} }
}, },
"ionicons": { "ionicons": {
"version": "5.5.4", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.4.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
"integrity": "sha512-3ph8X9my3inhabWEZ7N0XRA0MnnNQ1v9a602mLNgWsIXnxE9G5BybIZ/pws/OZZ/hoNlvSjk801N03yL9/FNgQ==", "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
"requires": { "requires": {
"@stencil/core": "~2.10.0" "@stencil/core": "~2.10.0"
} }

View File

@ -32,7 +32,7 @@
], ],
"dependencies": { "dependencies": {
"@stencil/core": "~2.10.0", "@stencil/core": "~2.10.0",
"ionicons": "^5.5.4", "ionicons": "^6.0.0",
"tslib": "^2.1.0" "tslib": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {

View File

@ -187,7 +187,7 @@ export class Accordion implements ComponentInterface {
iconEl.lazy = false; iconEl.lazy = false;
iconEl.classList.add('ion-accordion-toggle-icon'); iconEl.classList.add('ion-accordion-toggle-icon');
iconEl.icon = toggleIcon; iconEl.icon = toggleIcon;
iconEl.ariaHidden = 'true'; iconEl.setAttribute('aria-hidden', 'true');
ionItem.appendChild(iconEl); ionItem.appendChild(iconEl);
} }

View File

@ -41,7 +41,7 @@
], ],
"dependencies": { "dependencies": {
"@ionic/core": "6.0.0-rc.2", "@ionic/core": "6.0.0-rc.2",
"ionicons": "^5.5.4", "ionicons": "^6.0.0",
"tslib": "*" "tslib": "*"
}, },
"peerDependencies": { "peerDependencies": {

View File

@ -7,7 +7,6 @@ import { IonIconInner } from './inner-proxies';
import { createForwardRef, isPlatform } from './utils'; import { createForwardRef, isPlatform } from './utils';
interface IonIconProps { interface IonIconProps {
ariaLabel?: string;
color?: string; color?: string;
flipRtl?: boolean; flipRtl?: boolean;
icon?: string; icon?: string;

View File

@ -9,8 +9,8 @@
"version": "6.0.0-rc.2", "version": "6.0.0-rc.2",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ionic/core": "6.0.0-rc.1", "@ionic/core": "6.0.0-rc.2",
"ionicons": "^5.5.4" "ionicons": "^6.0.0"
}, },
"devDependencies": { "devDependencies": {
"@stencil/core": "^1.17.0", "@stencil/core": "^1.17.0",
@ -53,19 +53,19 @@
} }
}, },
"node_modules/@ionic/core": { "node_modules/@ionic/core": {
"version": "6.0.0-rc.1", "version": "6.0.0-rc.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.0-rc.1.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.0-rc.2.tgz",
"integrity": "sha512-O7kqodTo61gJKaeokYcdM5KwnfZ1Li5UiBbQH5oZXeU0jzJWfp5dU02Chk3dCMlMI1dUYmQRnu2KCwETV/X5Kg==", "integrity": "sha512-evf3J01B91zs386bBYz55zjG0I7BXSs/+pySkj+fDHVT/teXYntpUzebm5rqA0/IoUn6QXEdz1x3Nrz8040/Jg==",
"dependencies": { "dependencies": {
"@stencil/core": "^2.6.0", "@stencil/core": "~2.10.0",
"ionicons": "^5.5.1", "ionicons": "^5.5.4",
"tslib": "^2.1.0" "tslib": "^2.1.0"
} }
}, },
"node_modules/@ionic/core/node_modules/@stencil/core": { "node_modules/@ionic/core/node_modules/@stencil/core": {
"version": "2.6.0", "version": "2.10.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
"integrity": "sha512-QsxWayZyusnqSZrlCl81R71rA3KqFjVVQSH4E0rGN15F1GdQaFonKlHLyCOLKLig1zzC+DQkLLiUuocexuvdeQ==", "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==",
"bin": { "bin": {
"stencil": "bin/stencil" "stencil": "bin/stencil"
}, },
@ -74,6 +74,14 @@
"npm": ">=6.0.0" "npm": ">=6.0.0"
} }
}, },
"node_modules/@ionic/core/node_modules/ionicons": {
"version": "5.5.4",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.4.tgz",
"integrity": "sha512-3ph8X9my3inhabWEZ7N0XRA0MnnNQ1v9a602mLNgWsIXnxE9G5BybIZ/pws/OZZ/hoNlvSjk801N03yL9/FNgQ==",
"dependencies": {
"@stencil/core": "~2.10.0"
}
},
"node_modules/@ionic/core/node_modules/tslib": { "node_modules/@ionic/core/node_modules/tslib": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
@ -356,9 +364,9 @@
"dev": true "dev": true
}, },
"node_modules/ionicons": { "node_modules/ionicons": {
"version": "5.5.4", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.4.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
"integrity": "sha512-3ph8X9my3inhabWEZ7N0XRA0MnnNQ1v9a602mLNgWsIXnxE9G5BybIZ/pws/OZZ/hoNlvSjk801N03yL9/FNgQ==", "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
"dependencies": { "dependencies": {
"@stencil/core": "~2.10.0" "@stencil/core": "~2.10.0"
} }
@ -633,19 +641,27 @@
} }
}, },
"@ionic/core": { "@ionic/core": {
"version": "6.0.0-rc.1", "version": "6.0.0-rc.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.0-rc.1.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.0-rc.2.tgz",
"integrity": "sha512-O7kqodTo61gJKaeokYcdM5KwnfZ1Li5UiBbQH5oZXeU0jzJWfp5dU02Chk3dCMlMI1dUYmQRnu2KCwETV/X5Kg==", "integrity": "sha512-evf3J01B91zs386bBYz55zjG0I7BXSs/+pySkj+fDHVT/teXYntpUzebm5rqA0/IoUn6QXEdz1x3Nrz8040/Jg==",
"requires": { "requires": {
"@stencil/core": "^2.6.0", "@stencil/core": "~2.10.0",
"ionicons": "^5.5.1", "ionicons": "^5.5.4",
"tslib": "^2.1.0" "tslib": "^2.1.0"
}, },
"dependencies": { "dependencies": {
"@stencil/core": { "@stencil/core": {
"version": "2.6.0", "version": "2.10.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
"integrity": "sha512-QsxWayZyusnqSZrlCl81R71rA3KqFjVVQSH4E0rGN15F1GdQaFonKlHLyCOLKLig1zzC+DQkLLiUuocexuvdeQ==" "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A=="
},
"ionicons": {
"version": "5.5.4",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.4.tgz",
"integrity": "sha512-3ph8X9my3inhabWEZ7N0XRA0MnnNQ1v9a602mLNgWsIXnxE9G5BybIZ/pws/OZZ/hoNlvSjk801N03yL9/FNgQ==",
"requires": {
"@stencil/core": "~2.10.0"
}
}, },
"tslib": { "tslib": {
"version": "2.2.0", "version": "2.2.0",
@ -904,9 +920,9 @@
"dev": true "dev": true
}, },
"ionicons": { "ionicons": {
"version": "5.5.4", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.5.4.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
"integrity": "sha512-3ph8X9my3inhabWEZ7N0XRA0MnnNQ1v9a602mLNgWsIXnxE9G5BybIZ/pws/OZZ/hoNlvSjk801N03yL9/FNgQ==", "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
"requires": { "requires": {
"@stencil/core": "~2.10.0" "@stencil/core": "~2.10.0"
}, },

View File

@ -60,7 +60,7 @@
}, },
"dependencies": { "dependencies": {
"@ionic/core": "6.0.0-rc.2", "@ionic/core": "6.0.0-rc.2",
"ionicons": "^5.5.4" "ionicons": "^6.0.0"
}, },
"vetur": { "vetur": {
"tags": "dist/vetur/tags.json", "tags": "dist/vetur/tags.json",

View File

@ -6,7 +6,6 @@ import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js';
export const IonIcon = /*@__PURE__*/ defineComponent({ export const IonIcon = /*@__PURE__*/ defineComponent({
name: 'IonIcon', name: 'IonIcon',
props: { props: {
ariaLabel: String,
color: String, color: String,
flipRtl: Boolean, flipRtl: Boolean,
icon: String, icon: String,