From fd970d12951d201e46def08911e333a6f5f60af2 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 17 Jul 2024 14:06:56 -0400 Subject: [PATCH 1/4] docs(breadcrumbs): update icon playgrounds to use addIcons usage --- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 22 +++++++++ .../icons/custom-separators/index.md | 33 +++++++++++-- .../index_html.md} | 0 .../custom-separators/javascript/index_ts.md | 35 ++++++++++++++ .../example_component_html.md} | 0 .../angular/example_component_ts.md | 22 +++++++++ .../breadcrumbs/icons/icons-on-items/index.md | 31 +++++++++++-- .../index_html.md} | 0 .../icons-on-items/javascript/index_ts.md | 35 ++++++++++++++ .../example_component_html.md} | 0 .../angular/example_component_ts.md | 22 +++++++++ .../icons/custom-separators/index.md | 33 +++++++++++-- .../index_html.md} | 0 .../custom-separators/javascript/index_ts.md | 46 +++++++++++++++++++ .../example_component_html.md} | 0 .../angular/example_component_ts.md | 22 +++++++++ .../breadcrumbs/icons/icons-on-items/index.md | 31 +++++++++++-- .../index_html.md} | 0 .../icons-on-items/javascript/index_ts.md | 46 +++++++++++++++++++ 20 files changed, 364 insertions(+), 14 deletions(-) rename static/usage/v7/breadcrumbs/icons/custom-separators/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md rename static/usage/v7/breadcrumbs/icons/custom-separators/{javascript.md => javascript/index_html.md} (100%) create mode 100644 static/usage/v7/breadcrumbs/icons/custom-separators/javascript/index_ts.md rename static/usage/v7/breadcrumbs/icons/icons-on-items/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md rename static/usage/v7/breadcrumbs/icons/icons-on-items/{javascript.md => javascript/index_html.md} (100%) create mode 100644 static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_ts.md rename static/usage/v8/breadcrumbs/icons/custom-separators/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md rename static/usage/v8/breadcrumbs/icons/custom-separators/{javascript.md => javascript/index_html.md} (100%) create mode 100644 static/usage/v8/breadcrumbs/icons/custom-separators/javascript/index_ts.md rename static/usage/v8/breadcrumbs/icons/icons-on-items/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md rename static/usage/v8/breadcrumbs/icons/icons-on-items/{javascript.md => javascript/index_html.md} (100%) create mode 100644 static/usage/v8/breadcrumbs/icons/icons-on-items/javascript/index_ts.md diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/angular.md b/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_html.md similarity index 100% rename from static/usage/v7/breadcrumbs/icons/custom-separators/angular.md rename to static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_html.md diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md new file mode 100644 index 00000000000..072f2c1090f --- /dev/null +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { arrowForwardCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ arrowForwardCircle }); + } +} +``` diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md index 4b42e7b7e40..40727451104 100644 --- a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md @@ -1,12 +1,37 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/javascript.md b/static/usage/v7/breadcrumbs/icons/custom-separators/javascript/index_html.md similarity index 100% rename from static/usage/v7/breadcrumbs/icons/custom-separators/javascript.md rename to static/usage/v7/breadcrumbs/icons/custom-separators/javascript/index_html.md diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/javascript/index_ts.md b/static/usage/v7/breadcrumbs/icons/custom-separators/javascript/index_ts.md new file mode 100644 index 00000000000..b2660847593 --- /dev/null +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/javascript/index_ts.md @@ -0,0 +1,35 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { arrowForwardCircle } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "arrow-forward-circle" key. + * Alternatively, developers can do: + * addIcons({ 'arrow-forward-circle': arrowForwardCircle }); + */ +addIcons({ arrowForwardCircle }); + +defineCustomElements(); +``` diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/angular.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_html.md similarity index 100% rename from static/usage/v7/breadcrumbs/icons/icons-on-items/angular.md rename to static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_html.md diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md new file mode 100644 index 00000000000..ccc9439a382 --- /dev/null +++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { camera, film, flash, home } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ camera, film, flash, home }); + } +} +``` diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md index 387f0c12e55..e616c86dfe5 100644 --- a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md +++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md @@ -1,13 +1,38 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_html.md similarity index 100% rename from static/usage/v7/breadcrumbs/icons/icons-on-items/javascript.md rename to static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_html.md diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_ts.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_ts.md new file mode 100644 index 00000000000..a5747c4c0c4 --- /dev/null +++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_ts.md @@ -0,0 +1,35 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { camera, film, flash, home } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * gets mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'camera': camera, 'film': film, 'flash': flash, 'home': home }); + */ +addIcons({ camera, film, flash, home }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/angular.md b/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_html.md similarity index 100% rename from static/usage/v8/breadcrumbs/icons/custom-separators/angular.md rename to static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_html.md diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md new file mode 100644 index 00000000000..072f2c1090f --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { arrowForwardCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ arrowForwardCircle }); + } +} +``` diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/index.md b/static/usage/v8/breadcrumbs/icons/custom-separators/index.md index 6d4319e425b..bdaa9b06676 100644 --- a/static/usage/v8/breadcrumbs/icons/custom-separators/index.md +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/index.md @@ -1,12 +1,37 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/javascript.md b/static/usage/v8/breadcrumbs/icons/custom-separators/javascript/index_html.md similarity index 100% rename from static/usage/v8/breadcrumbs/icons/custom-separators/javascript.md rename to static/usage/v8/breadcrumbs/icons/custom-separators/javascript/index_html.md diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/javascript/index_ts.md b/static/usage/v8/breadcrumbs/icons/custom-separators/javascript/index_ts.md new file mode 100644 index 00000000000..37d057226a0 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { arrowForwardCircle } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "arrow-forward-circle" key. + * Alternatively, developers can do: + * addIcons({ 'arrow-forward-circle': arrowForwardCircle }); + */ +addIcons({ arrowForwardCircle }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/angular.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_html.md similarity index 100% rename from static/usage/v8/breadcrumbs/icons/icons-on-items/angular.md rename to static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_html.md diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md new file mode 100644 index 00000000000..ccc9439a382 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { camera, film, flash, home } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ camera, film, flash, home }); + } +} +``` diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md index 23fd0060c40..4ae87af0342 100644 --- a/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md @@ -1,13 +1,38 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript/index_html.md similarity index 100% rename from static/usage/v8/breadcrumbs/icons/icons-on-items/javascript.md rename to static/usage/v8/breadcrumbs/icons/icons-on-items/javascript/index_html.md diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript/index_ts.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript/index_ts.md new file mode 100644 index 00000000000..576ff2920fc --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { camera, film, flash, home } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * gets mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'camera': camera, 'film': film, 'flash': flash, 'home': home }); + */ +addIcons({ camera, film, flash, home }); + +defineCustomElements(); +``` From f501d4fb5cb848b8593f97dad0f1ae9fb069925e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 17 Jul 2024 14:19:22 -0400 Subject: [PATCH 2/4] style: typo --- .../v7/breadcrumbs/icons/icons-on-items/javascript/index_ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_ts.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_ts.md index a5747c4c0c4..a2231666054 100644 --- a/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_ts.md +++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript/index_ts.md @@ -25,7 +25,7 @@ import './theme/variables.css'; /** * On Ionicons 7.2+ these icons - * gets mapped to a kebab-case key. + * get mapped to a kebab-case key. * Alternatively, developers can do: * addIcons({ 'camera': camera, 'film': film, 'flash': flash, 'home': home }); */ From b14a17fc782ba873bda47ea267ad04479c53f053 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 18 Jul 2024 14:35:23 -0400 Subject: [PATCH 3/4] style: property order and syntax --- static/usage/v7/breadcrumbs/icons/icons-on-items/index.md | 2 +- static/usage/v8/breadcrumbs/icons/custom-separators/index.md | 2 +- static/usage/v8/breadcrumbs/icons/icons-on-items/index.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md index e616c86dfe5..5ba27a2d180 100644 --- a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md +++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md @@ -11,7 +11,6 @@ import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/index.md b/static/usage/v8/breadcrumbs/icons/custom-separators/index.md index bdaa9b06676..7ef9ae24776 100644 --- a/static/usage/v8/breadcrumbs/icons/custom-separators/index.md +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/index.md @@ -10,7 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md' import angular_example_component_ts from './angular/example_component_ts.md'; From 4b63875d0eb4e798effe1c8708787b134a797a58 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 18 Jul 2024 14:37:02 -0400 Subject: [PATCH 4/4] style: property syntax --- static/usage/v7/breadcrumbs/icons/custom-separators/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md index 40727451104..ad14de22238 100644 --- a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md @@ -10,7 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md' import angular_example_component_ts from './angular/example_component_ts.md';