From ce2315dd2e580436ee00d004242fe8cc06e149eb Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 11 Jun 2024 18:48:50 -0400 Subject: [PATCH 1/3] docs(icon): update icon playgrounds to use addIcons usage --- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 22 +++++++++ static/usage/v7/icon/basic/index.md | 36 +++++++++++++-- .../index_html.md} | 0 .../v7/icon/basic/javascript/index_ts.md | 35 ++++++++++++++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 22 +++++++++ static/usage/v8/icon/basic/index.md | 36 +++++++++++++-- .../v8/icon/basic/javascript/index_html.md | 6 +++ .../v8/icon/basic/javascript/index_ts.md | 46 +++++++++++++++++++ 10 files changed, 197 insertions(+), 6 deletions(-) rename static/usage/v7/icon/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/icon/basic/angular/example_component_ts.md rename static/usage/v7/icon/basic/{javascript.md => javascript/index_html.md} (100%) create mode 100644 static/usage/v7/icon/basic/javascript/index_ts.md rename static/usage/v8/icon/basic/{javascript.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/icon/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/icon/basic/javascript/index_html.md create mode 100644 static/usage/v8/icon/basic/javascript/index_ts.md diff --git a/static/usage/v7/icon/basic/angular.md b/static/usage/v7/icon/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/icon/basic/angular.md rename to static/usage/v7/icon/basic/angular/example_component_html.md diff --git a/static/usage/v7/icon/basic/angular/example_component_ts.md b/static/usage/v7/icon/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..48b43c838c1 --- /dev/null +++ b/static/usage/v7/icon/basic/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { logoIonic } 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({ logoIonic }); + } +} +``` diff --git a/static/usage/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md index f766b6112ac..027794b2c66 100644 --- a/static/usage/v7/icon/basic/index.md +++ b/static/usage/v7/icon/basic/index.md @@ -1,8 +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/icon/basic/javascript.md b/static/usage/v7/icon/basic/javascript/index_html.md similarity index 100% rename from static/usage/v7/icon/basic/javascript.md rename to static/usage/v7/icon/basic/javascript/index_html.md diff --git a/static/usage/v7/icon/basic/javascript/index_ts.md b/static/usage/v7/icon/basic/javascript/index_ts.md new file mode 100644 index 00000000000..af8a2639a6f --- /dev/null +++ b/static/usage/v7/icon/basic/javascript/index_ts.md @@ -0,0 +1,35 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { logoIonic } 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 "logo-ionic" key. + * Alternatively, developers can do: + * addIcons({ 'logo-ionic': logoIonic }); + */ +addIcons({ logoIonic }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/icon/basic/javascript.md b/static/usage/v8/icon/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/icon/basic/javascript.md rename to static/usage/v8/icon/basic/angular/example_component_html.md diff --git a/static/usage/v8/icon/basic/angular/example_component_ts.md b/static/usage/v8/icon/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..48b43c838c1 --- /dev/null +++ b/static/usage/v8/icon/basic/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { logoIonic } 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({ logoIonic }); + } +} +``` diff --git a/static/usage/v8/icon/basic/index.md b/static/usage/v8/icon/basic/index.md index dda963a2ca8..b69ca4e9aa2 100644 --- a/static/usage/v8/icon/basic/index.md +++ b/static/usage/v8/icon/basic/index.md @@ -1,8 +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/icon/basic/javascript/index_html.md b/static/usage/v8/icon/basic/javascript/index_html.md new file mode 100644 index 00000000000..7dba86b2634 --- /dev/null +++ b/static/usage/v8/icon/basic/javascript/index_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v8/icon/basic/javascript/index_ts.md b/static/usage/v8/icon/basic/javascript/index_ts.md new file mode 100644 index 00000000000..0a8266e5527 --- /dev/null +++ b/static/usage/v8/icon/basic/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { logoIonic } 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 "logo-ionic" key. + * Alternatively, developers can do: + * addIcons({ 'logo-ionic': logoIonic }); + */ +addIcons({ logoIonic }); + +defineCustomElements(); +``` From a7177e7fe9ec04f62a659191f8c3c82e0e71b7a8 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 12 Jun 2024 10:57:39 -0400 Subject: [PATCH 2/3] style: lint --- static/usage/v7/icon/basic/index.md | 6 +++--- static/usage/v8/icon/basic/index.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/static/usage/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md index 027794b2c66..05bfa4c6427 100644 --- a/static/usage/v7/icon/basic/index.md +++ b/static/usage/v7/icon/basic/index.md @@ -19,7 +19,7 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'index.ts': javascript_index_ts, }, dependencies: { - 'ionicons': '7.4.0', + ionicons: '7.4.0', }, }, react, @@ -30,9 +30,9 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'src/app/example.component.ts': angular_example_component_ts, }, dependencies: { - 'ionicons': '7.4.0', + ionicons: '7.4.0', }, - } + }, }} src="usage/v7/icon/basic/demo.html" /> diff --git a/static/usage/v8/icon/basic/index.md b/static/usage/v8/icon/basic/index.md index b69ca4e9aa2..39ee640c0d6 100644 --- a/static/usage/v8/icon/basic/index.md +++ b/static/usage/v8/icon/basic/index.md @@ -19,7 +19,7 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'index.ts': javascript_index_ts, }, dependencies: { - 'ionicons': '7.4.0', + ionicons: '7.4.0', }, }, react, @@ -30,9 +30,9 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'src/app/example.component.ts': angular_example_component_ts, }, dependencies: { - 'ionicons': '7.4.0', + ionicons: '7.4.0', }, - } + }, }} src="usage/v8/icon/basic/demo.html" /> From a0a59250b60a4e3d61ed682c30e10792fb9b7179 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 18 Jul 2024 14:32:34 -0400 Subject: [PATCH 3/3] style: prop order --- static/usage/v7/icon/basic/index.md | 2 +- static/usage/v8/icon/basic/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/static/usage/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md index dd79607514f..a3ddd910a03 100644 --- a/static/usage/v7/icon/basic/index.md +++ b/static/usage/v7/icon/basic/index.md @@ -11,7 +11,6 @@ import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/icon/basic/index.md b/static/usage/v8/icon/basic/index.md index 44ee65811ca..d339021daa2 100644 --- a/static/usage/v8/icon/basic/index.md +++ b/static/usage/v8/icon/basic/index.md @@ -11,7 +11,6 @@ import angular_example_component_ts from './angular/example_component_ts.md';