Skip to content

Commit 9673362

Browse files
authoredJul 19, 2024··
docs(refresher): update icon playgrounds to use addIcons usage (#3748)
1 parent c217a7d commit 9673362

File tree

8 files changed

+133
-4
lines changed

8 files changed

+133
-4
lines changed
 

‎static/usage/v7/refresher/advanced/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
```ts
22
import { Component } from '@angular/core';
33

4+
import { addIcons } from 'ionicons';
5+
import { ellipse } from 'ionicons/icons';
6+
47
@Component({
58
selector: 'app-example',
69
templateUrl: 'example.component.html',
@@ -24,6 +27,15 @@ export class ExampleComponent {
2427
];
2528
public items = [];
2629

30+
constructor() {
31+
/**
32+
* Any icons you want to use in your application
33+
* can be registered in app.component.ts and then
34+
* referenced by name anywhere in your application.
35+
*/
36+
addIcons({ ellipse });
37+
}
38+
2739
ngOnInit() {
2840
this.addItems(5);
2941
}

‎static/usage/v7/refresher/advanced/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Playground from '@site/src/components/global/Playground';
22

3-
import javascript from './javascript.md';
3+
import javascript_index_html from './javascript/index_html.md';
4+
import javascript_index_ts from './javascript/index_ts.md';
45

56
import react_main_tsx from './react/main_tsx.md';
67
import react_main_css from './react/main_css.md';
@@ -14,7 +15,15 @@ import angular_example_component_css from './angular/example_component_css.md';
1415
<Playground
1516
version="7"
1617
code={{
17-
javascript,
18+
javascript: {
19+
files: {
20+
'index.html': javascript_index_html,
21+
'index.ts': javascript_index_ts,
22+
},
23+
dependencies: {
24+
ionicons: '7.4.0',
25+
},
26+
},
1827
react: {
1928
files: {
2029
'src/main.tsx': react_main_tsx,
@@ -28,6 +37,9 @@ import angular_example_component_css from './angular/example_component_css.md';
2837
'src/app/example.component.ts': angular_example_component_ts,
2938
'src/app/example.component.css': angular_example_component_css,
3039
},
40+
dependencies: {
41+
ionicons: '7.4.0',
42+
},
3143
},
3244
}}
3345
src="usage/v7/refresher/advanced/demo.html"
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
```ts
2+
import { defineCustomElements } from '@ionic/core/loader';
3+
4+
import { addIcons } from 'ionicons';
5+
import { ellipse } from 'ionicons/icons';
6+
7+
/* Core CSS required for Ionic components to work properly */
8+
import '@ionic/core/css/core.css';
9+
10+
/* Basic CSS for apps built with Ionic */
11+
import '@ionic/core/css/normalize.css';
12+
import '@ionic/core/css/structure.css';
13+
import '@ionic/core/css/typography.css';
14+
15+
/* Optional CSS utils that can be commented out */
16+
import '@ionic/core/css/padding.css';
17+
import '@ionic/core/css/float-elements.css';
18+
import '@ionic/core/css/text-alignment.css';
19+
import '@ionic/core/css/text-transformation.css';
20+
import '@ionic/core/css/flex-utils.css';
21+
import '@ionic/core/css/display.css';
22+
23+
/* Theme variables */
24+
import './theme/variables.css';
25+
26+
/**
27+
* On Ionicons 7.2+ this icon
28+
* gets mapped to an "ellipse" key.
29+
* Alternatively, developers can do:
30+
* addIcons({ 'ellipse': ellipse });
31+
*/
32+
addIcons({ ellipse });
33+
34+
defineCustomElements();
35+
```

‎static/usage/v8/refresher/advanced/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
```ts
22
import { Component } from '@angular/core';
33

4+
import { addIcons } from 'ionicons';
5+
import { ellipse } from 'ionicons/icons';
6+
47
@Component({
58
selector: 'app-example',
69
templateUrl: 'example.component.html',
@@ -24,6 +27,15 @@ export class ExampleComponent {
2427
];
2528
public items = [];
2629

30+
constructor() {
31+
/**
32+
* Any icons you want to use in your application
33+
* can be registered in app.component.ts and then
34+
* referenced by name anywhere in your application.
35+
*/
36+
addIcons({ ellipse });
37+
}
38+
2739
ngOnInit() {
2840
this.addItems(5);
2941
}

‎static/usage/v8/refresher/advanced/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Playground from '@site/src/components/global/Playground';
22

3-
import javascript from './javascript.md';
3+
import javascript_index_html from './javascript/index_html.md';
4+
import javascript_index_ts from './javascript/index_ts.md';
45

56
import react_main_tsx from './react/main_tsx.md';
67
import react_main_css from './react/main_css.md';
@@ -14,7 +15,15 @@ import angular_example_component_css from './angular/example_component_css.md';
1415
<Playground
1516
version="8"
1617
code={{
17-
javascript,
18+
javascript: {
19+
files: {
20+
'index.html': javascript_index_html,
21+
'index.ts': javascript_index_ts,
22+
},
23+
dependencies: {
24+
ionicons: '7.4.0',
25+
},
26+
},
1827
react: {
1928
files: {
2029
'src/main.tsx': react_main_tsx,
@@ -28,6 +37,9 @@ import angular_example_component_css from './angular/example_component_css.md';
2837
'src/app/example.component.ts': angular_example_component_ts,
2938
'src/app/example.component.css': angular_example_component_css,
3039
},
40+
dependencies: {
41+
ionicons: '7.4.0',
42+
},
3143
},
3244
}}
3345
src="usage/v8/refresher/advanced/demo.html"
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
```ts
2+
import { defineCustomElements } from '@ionic/core/loader';
3+
4+
import { addIcons } from 'ionicons';
5+
import { ellipse } from 'ionicons/icons';
6+
7+
/* Core CSS required for Ionic components to work properly */
8+
import '@ionic/core/css/core.css';
9+
10+
/* Basic CSS for apps built with Ionic */
11+
import '@ionic/core/css/normalize.css';
12+
import '@ionic/core/css/structure.css';
13+
import '@ionic/core/css/typography.css';
14+
15+
/* Optional CSS utils that can be commented out */
16+
import '@ionic/core/css/padding.css';
17+
import '@ionic/core/css/float-elements.css';
18+
import '@ionic/core/css/text-alignment.css';
19+
import '@ionic/core/css/text-transformation.css';
20+
import '@ionic/core/css/flex-utils.css';
21+
import '@ionic/core/css/display.css';
22+
23+
/**
24+
* Ionic Dark Theme
25+
* -----------------------------------------------------
26+
* For more information, please see:
27+
* https://ionicframework.com/docs/theming/dark-mode
28+
*/
29+
30+
// import '@ionic/core/css/palettes/dark.always.css';
31+
// import '@ionic/core/css/palettes/dark.class.css';
32+
import '@ionic/core/css/palettes/dark.system.css';
33+
34+
/* Theme variables */
35+
import './theme/variables.css';
36+
37+
/**
38+
* On Ionicons 7.2+ this icon
39+
* gets mapped to an "ellipse" key.
40+
* Alternatively, developers can do:
41+
* addIcons({ 'ellipse': ellipse });
42+
*/
43+
addIcons({ ellipse });
44+
45+
defineCustomElements();
46+
```

0 commit comments

Comments
 (0)
Please sign in to comment.