diff --git a/static/usage/v7/toolbar/buttons/angular.md b/static/usage/v7/toolbar/buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v7/toolbar/buttons/angular.md rename to static/usage/v7/toolbar/buttons/angular/example_component_html.md diff --git a/static/usage/v7/toolbar/buttons/angular/example_component_ts.md b/static/usage/v7/toolbar/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..7af150bd169 --- /dev/null +++ b/static/usage/v7/toolbar/buttons/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } 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({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star }); + } +} +``` diff --git a/static/usage/v7/toolbar/buttons/index.md b/static/usage/v7/toolbar/buttons/index.md index d0d4897944b..55991d04a29 100644 --- a/static/usage/v7/toolbar/buttons/index.md +++ b/static/usage/v7/toolbar/buttons/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/toolbar/buttons/javascript.md b/static/usage/v7/toolbar/buttons/javascript/index_html.md similarity index 100% rename from static/usage/v7/toolbar/buttons/javascript.md rename to static/usage/v7/toolbar/buttons/javascript/index_html.md diff --git a/static/usage/v7/toolbar/buttons/javascript/index_ts.md b/static/usage/v7/toolbar/buttons/javascript/index_ts.md new file mode 100644 index 00000000000..48da1e0ec1c --- /dev/null +++ b/static/usage/v7/toolbar/buttons/javascript/index_ts.md @@ -0,0 +1,36 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } 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 + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'create': create, 'ellipsis-horizontal': ellipsisHorizontal, 'ellipsis-vertical': ellipsisVertical, + * 'help-circle': helpCircle, 'person-circle': personCircle, 'search': search, 'star': star }); + */ +addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/toolbar/buttons/angular.md b/static/usage/v8/toolbar/buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v8/toolbar/buttons/angular.md rename to static/usage/v8/toolbar/buttons/angular/example_component_html.md diff --git a/static/usage/v8/toolbar/buttons/angular/example_component_ts.md b/static/usage/v8/toolbar/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..7af150bd169 --- /dev/null +++ b/static/usage/v8/toolbar/buttons/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } 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({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star }); + } +} +``` diff --git a/static/usage/v8/toolbar/buttons/index.md b/static/usage/v8/toolbar/buttons/index.md index 3a609af4de6..55ce4207514 100644 --- a/static/usage/v8/toolbar/buttons/index.md +++ b/static/usage/v8/toolbar/buttons/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/toolbar/buttons/javascript.md b/static/usage/v8/toolbar/buttons/javascript/index_html.md similarity index 100% rename from static/usage/v8/toolbar/buttons/javascript.md rename to static/usage/v8/toolbar/buttons/javascript/index_html.md diff --git a/static/usage/v8/toolbar/buttons/javascript/index_ts.md b/static/usage/v8/toolbar/buttons/javascript/index_ts.md new file mode 100644 index 00000000000..a8f076b99cb --- /dev/null +++ b/static/usage/v8/toolbar/buttons/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } 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 + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'create': create, 'ellipsis-horizontal': ellipsisHorizontal, 'ellipsis-vertical': ellipsisVertical, + * 'help-circle': helpCircle, 'person-circle': personCircle, 'search': search, 'star': star }); + */ +addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star }); + +defineCustomElements(); +```