docs: icon examples

apps/web/src/app/docs/components/example/example.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Inject, input, OnInit, signal} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, input, OnInit, signal } from '@angular/core';
 import { convertToBoolean, XuiCardModule, XuiIcon, XuiTabModule, XuiTooltipModule } from '@xui/components';
 import sdk, { Project, ProjectFiles } from '@stackblitz/sdk';
 import { HttpClient } from '@angular/common/http';
@@ -48,7 +48,10 @@ export class Example implements OnInit {
     };
   }
 
-  constructor(private http: HttpClient, @Inject(DOCUMENT) private document: Document) {}
+  constructor(
+    private http: HttpClient,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
 
   async ngOnInit() {
     this.content.set(await this.fetchFiles());
@@ -129,7 +132,9 @@ export class Example implements OnInit {
   openProject() {
     sdk.openProject(this.project, {
       newWindow: true,
-      openFile: this.content().map(x => x.path).join(',')
+      openFile: this.content()
+        .map(x => x.path)
+        .join(',')
     });
   }
 
@@ -181,5 +186,5 @@ export enum FileType {
 }
 
 interface Files {
-  [name: string]: FileType
+  [name: string]: FileType;
 }

apps/web/src/app/docs/components/usage/usages.html

@@ -2,7 +2,9 @@
   <table cdk-table [dataSource]="dataSource" class="x-table">
     <ng-container cdkColumnDef="param">
       <th cdk-header-cell *cdkHeaderCellDef>Param</th>
-      <td cdk-cell *cdkCellDef="let element"><span class="param">{{ element.param }}</span></td>
+      <td cdk-cell *cdkCellDef="let element">
+        <span class="param">{{ element.param }}</span>
+      </td>
     </ng-container>
 
     <ng-container cdkColumnDef="description">
@@ -12,12 +14,16 @@
 
     <ng-container cdkColumnDef="type">
       <th cdk-header-cell *cdkHeaderCellDef>Type</th>
-      <td cdk-cell *cdkCellDef="let element"><span class="type">{{ element.type }}</span></td>
+      <td cdk-cell *cdkCellDef="let element">
+        <span class="type">{{ element.type }}</span>
+      </td>
     </ng-container>
 
     <ng-container cdkColumnDef="default">
       <th cdk-header-cell *cdkHeaderCellDef>Default</th>
-      <td cdk-cell *cdkCellDef="let element"><span *ngIf="element.default" class="default">{{ element.default }}</span></td>
+      <td cdk-cell *cdkCellDef="let element">
+        <span *ngIf="element.default" class="default">{{ element.default }}</span>
+      </td>
     </ng-container>
 
     <ng-container cdkColumnDef="property">

apps/web/src/app/docs/components/usage/usages.ts

@@ -4,7 +4,7 @@ import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { CdkTableModule } from '@angular/cdk/table';
 import { XuiCardModule } from '@xui/components';
-import {CommonModule} from "@angular/common";
+import { CommonModule } from '@angular/common';
 
 @Component({
   standalone: true,

apps/web/src/app/docs/xui-components/icon/icon.component.html

@@ -2,13 +2,8 @@
   <code apiReference highlight="import { XuiIconComponent } from '@xui/components';" language="typescript"></code>
 </app-information>
 
-<app-example>
-  <div style="display: flex">
-    <xui-icon icon="add_reaction"></xui-icon>
-  </div>
-  <div style="display: flex">
-    <xui-icon [style.width.px]="100" icon="add_reaction"></xui-icon>
-  </div>
+<app-example [files]="example1">
+  <app-icon-example1></app-icon-example1>
 </app-example>
 
 <app-usage [usage]="usage"></app-usage>

apps/web/src/app/docs/xui-components/icon/icon.component.ts

@@ -1,18 +1,23 @@
 import { Component } from '@angular/core';
 import { Information } from '../../components/information';
-import { Example } from '../../components/example';
+import { Example, FileType } from '../../components/example';
 import { HighlightModule } from 'ngx-highlightjs';
 import { XuiIcon } from '@xui/components';
-import {Usage, Usages} from "../../components/usage";
+import { Usage, Usages } from '../../components/usage';
+import { IconExample1Component } from '../../../../examples/icon-example1/icon-example1.component';
 
 @Component({
   standalone: true,
-  imports: [Information, Example, Usages, HighlightModule, XuiIcon],
+  imports: [Information, Example, Usages, HighlightModule, XuiIcon, IconExample1Component],
   selector: 'app-icon',
   templateUrl: './icon.component.html',
   styleUrls: ['./icon.component.scss']
 })
 export class IconComponent {
+  readonly example1 = {
+    'icon-example1': FileType.Component
+  };
+
   usage: Usage[] = [
     {
       param: 'icon',

apps/web/src/app/docs/xui-components/input/input.component.ts

@@ -4,7 +4,7 @@ import { Information } from '../../components/information';
 import { Example } from '../../components/example';
 import { HighlightModule } from 'ngx-highlightjs';
 import { XuiButtonModule, XuiConfigModule, XuiIcon, XuiInputModule } from '@xui/components';
-import {Usage, Usages} from "../../components/usage";
+import { Usage, Usages } from '../../components/usage';
 
 @Component({
   standalone: true,

apps/web/src/app/docs/xui-components/radio-list/radio-list.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Information } from '../../components/information';
 import { Example } from '../../components/example';
-import {Usage, Usages} from '../../components/usage';
+import { Usage, Usages } from '../../components/usage';
 import { HighlightModule } from 'ngx-highlightjs';
 import { XuiRadioListModule } from '@xui/components';
 import { CommonModule } from '@angular/common';

apps/web/src/app/docs/xui-components/radio/radio.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { Information } from '../../components/information';
 import { Example } from '../../components/example';
-import {Usage, Usages} from '../../components/usage';
+import { Usage, Usages } from '../../components/usage';
 import { HighlightModule } from 'ngx-highlightjs';
 import { XuiRadioModule } from '@xui/components';
 

apps/web/src/examples/icon-example1/icon-example1.component.html

@@ -0,0 +1,2 @@
+<xui-icon icon="add_reaction"></xui-icon>
+<xui-icon [style.font-size.px]="100" icon="add_reaction"></xui-icon>

apps/web/src/examples/icon-example1/icon-example1.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XuiIcon } from '@xui/components';
+
+@Component({
+  selector: 'app-icon-example1',
+  standalone: true,
+  imports: [XuiIcon],
+  templateUrl: './icon-example1.component.html',
+  styleUrl: './icon-example1.component.scss'
+})
+export class IconExample1Component {}

apps/web/src/templates/angular.ts

@@ -11,14 +11,14 @@ const PACKAGE_JSON = {
     luxon: '^3.4.0',
     '@types/luxon': '^3.4.0',
 
-    "@angular/animations": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
+    '@angular/animations': '^18.0.0',
+    '@angular/common': '^18.0.0',
+    '@angular/compiler': '^18.0.0',
+    '@angular/core': '^18.0.0',
+    '@angular/forms': '^18.0.0',
+    '@angular/platform-browser': '^18.0.0',
     '@angular/platform-browser-dynamic': '^18.0.0',
-    "@angular/router": "^18.0.0",
+    '@angular/router': '^18.0.0',
     rxjs: '~7.8.1',
     tslib: '^2.5.0',
     'zone.js': '~0.14.0'
@@ -29,10 +29,10 @@ const PACKAGE_JSON = {
     build: 'ng build'
   },
   devDependencies: {
-    "@angular-devkit/build-angular": "^18.0.0",
-    "@angular/cli": "^18.0.1",
-    "@angular/compiler-cli": "^18.0.0",
-    "typescript": "~5.4.0"
+    '@angular-devkit/build-angular': '^18.0.0',
+    '@angular/cli': '^18.0.1',
+    '@angular/compiler-cli': '^18.0.0',
+    typescript: '~5.4.0'
   }
 };
 
@@ -154,7 +154,7 @@ $theme: core.define-dark-theme(
 @include xui.theme();
 `;
 
-const files: any = { };
+const files: any = {};
 
 files['src/index.html'] = `<!DOCTYPE html>
   <html lang="en">