From 9fc7c61a0eca30e5c5293dea122fb3e83184fd3f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 18 Jul 2024 18:02:58 -0400 Subject: [PATCH 1/2] docs(skeleton-text): update icon playgrounds to use addIcons usage --- .../basic/angular/example_component_ts.md | 12 +++++ static/usage/v7/skeleton-text/basic/index.md | 19 ++++++-- .../index_html.md} | 0 .../basic/javascript/index_ts.md | 35 ++++++++++++++ .../basic/angular/example_component_ts.md | 12 +++++ static/usage/v8/skeleton-text/basic/index.md | 17 ++++++- .../index_html.md} | 0 .../basic/javascript/index_ts.md | 46 +++++++++++++++++++ 8 files changed, 136 insertions(+), 5 deletions(-) rename static/usage/v7/skeleton-text/basic/{javascript.md => javascript/index_html.md} (100%) create mode 100644 static/usage/v7/skeleton-text/basic/javascript/index_ts.md rename static/usage/v8/skeleton-text/basic/{javascript.md => javascript/index_html.md} (100%) create mode 100644 static/usage/v8/skeleton-text/basic/javascript/index_ts.md diff --git a/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md index 8423962a3e9..c74fbd4855d 100644 --- a/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md +++ b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md @@ -1,6 +1,9 @@ ```ts import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { musicalNotes } from 'ionicons/icons'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', @@ -8,5 +11,14 @@ import { Component } from '@angular/core'; }) export class ExampleComponent { public loaded = false; + + 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({ musicalNotes }); + } } ``` diff --git a/static/usage/v7/skeleton-text/basic/index.md b/static/usage/v7/skeleton-text/basic/index.md index 2aacfe8b931..dd8d9001429 100644 --- a/static/usage/v7/skeleton-text/basic/index.md +++ b/static/usage/v7/skeleton-text/basic/index.md @@ -1,6 +1,8 @@ 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'; @@ -10,7 +12,15 @@ import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/skeleton-text/basic/javascript.md b/static/usage/v7/skeleton-text/basic/javascript/index_html.md similarity index 100% rename from static/usage/v7/skeleton-text/basic/javascript.md rename to static/usage/v7/skeleton-text/basic/javascript/index_html.md diff --git a/static/usage/v7/skeleton-text/basic/javascript/index_ts.md b/static/usage/v7/skeleton-text/basic/javascript/index_ts.md new file mode 100644 index 00000000000..effbfa43f33 --- /dev/null +++ b/static/usage/v7/skeleton-text/basic/javascript/index_ts.md @@ -0,0 +1,35 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { musicalNotes } 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 "musical-notes" key. + * Alternatively, developers can do: + * addIcons({ 'musical-notes': musicalNotes }); + */ +addIcons({ musicalNotes }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md index 8423962a3e9..c74fbd4855d 100644 --- a/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md +++ b/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md @@ -1,6 +1,9 @@ ```ts import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { musicalNotes } from 'ionicons/icons'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', @@ -8,5 +11,14 @@ import { Component } from '@angular/core'; }) export class ExampleComponent { public loaded = false; + + 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({ musicalNotes }); + } } ``` diff --git a/static/usage/v8/skeleton-text/basic/index.md b/static/usage/v8/skeleton-text/basic/index.md index 79c0900835d..2fc688bfb1c 100644 --- a/static/usage/v8/skeleton-text/basic/index.md +++ b/static/usage/v8/skeleton-text/basic/index.md @@ -1,6 +1,8 @@ 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'; @@ -10,7 +12,15 @@ import angular_example_component_ts from './angular/example_component_ts.md'; Date: Thu, 18 Jul 2024 18:04:56 -0400 Subject: [PATCH 2/2] style: same property order --- static/usage/v8/skeleton-text/basic/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v8/skeleton-text/basic/index.md b/static/usage/v8/skeleton-text/basic/index.md index 2fc688bfb1c..2f3678110bf 100644 --- a/static/usage/v8/skeleton-text/basic/index.md +++ b/static/usage/v8/skeleton-text/basic/index.md @@ -33,6 +33,6 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }, }} - src="usage/v8/skeleton-text/basic/demo.html" size="250px" + src="usage/v8/skeleton-text/basic/demo.html" />